float属性和clear属性
float属性：影响元素在水平方向上的对齐方式，有效取值：left,right,none,默认取值：none;
相当于原来的 HTMLalign 的作用，但能力要比 align 强的多。一旦发出float:left或float:right命令，被我浮动的对像就会向左或向右移动直到遇到边框( border) 、填充( padding） 、边界( margin ）或者另一个块对象的边缘为止。
float:left(俗称：往左靠）
注意：对某个div设置float:left；则影响该div，使其尽量往左靠，而下一个div通常也会与该div在同一行，而第三个不会有什么影响。我的理解是，float属性作用于块状元素，副作用是使块状元素的宽度高度为0，从而下一个块状元素会挤上来。例如
<ul>
<li ></li>
<li></li>
</ul> 由于浮动元素使图片的宽度和高度为0，所以图片无法正常显示，这时给li加上width,height属性，图片就可以正常显示了！
margin属性怎么用经典样式：
2、浮动对象有负边界的情况：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>浮动对象有负边界的情况[请用标准浏览器查看]</title>
<style type="text/css">
<!--
* {margin:0px; padding:0px;}
body {margin:50px; font-size:12px;}
#box {background-color: #66CCFF;  height: 100px; width: 300px; border: 1px solid #66CCCC; } 
#box2 {background-color: #33CC99;margin:-10px 10px 0px 0px; height:20px; width: 100px; border: 1px solid #336666;float:right;}
 -->
</style>
</head> 
<body>
<div id="box">
  <div id="box2">margin-top:-15px</div>
右上方小盒子边界是margin:-10px 10px 0px 0px;，folat:right，这个效果还可以吧，这可不是用相对、或者绝对定位做出来的哦，部分文字还是有环绕效果。如果在上面小盒子输标题，在这大盒子内部输内容，这种类型的网页版面效果还可以的，大家可以举一反三，多做出另外类似的效果来。</div>
</body>
</html> 
3.如果你要为一个网页准备一个页脚区块，比如<div id=”footer”></div>，你在设计网页的时候，你想不管你前边怎么浮动排版而又不想这个页脚跟上去，让它一直保持在前边内容后边，而且还是换行独立显示的，那么给这个页脚区块样式加个clear:both吧。 
4.CSS:让你的DIV层横着排列(float:left的作用)
1.通过float:left 使得div层横着排列
<html>
<head>
<title>monet</title>
</head>
<body>
<div >这两个层加了float:left</div>
<div ></div>
</body>
</html>
2.这个是不带float:left 的例子
<html>
<head>
<title>monet</title>
</head>
<body>
<div >这两个层没有加float:left</div>
<div ></div>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。