1】个人觉得这个说明挺清楚的:
浮动元素的定位是基于正常的文档流,然后从文档流中抽出并尽可能远的移动至左侧或者右侧。文字内容会围绕在浮动元素周围。当一个元素从正常文档流中抽出后,仍然在文档流中的其他元素将忽略该元素并填补他原先的空间。
2】元素float后自动转化为块元素
3】为所有float元素设定width,除了img元素(有隐藏宽度)
4】清理浮动元素三种方法:
a) 使用标签清理浮动(参考5】中的clear:both部分)
b)在需要清理浮动的元素中定义overflow:auto;zoom:1(兼容ie6);
c)在需要清理浮动的元素,例如#layout上定义
#layout:after{display:block;clear:both;content:”";visibility:hidden;height:0;}
5】浮动元素的垂直边距(margin)会叠加(10+10),两个未浮动的元素垂直边距(margin)不会叠加(10)
#nofloatbox { border: 1px solid #FF0000; background: #CCC; zoom:1; height:auto; margin-bottom:5px; } .floatbox { float: left; width: 600px; height: 100px; border: 1px solid #0000FF; background: #00FF00; margin:10px; } #l{ clear:both; width: 600px; height: 100px; border: 1px solid #0000FF; background: #00FF00; margin:10px; }
<div id="nofloatbox"> <div class="floatbox"></div> <div class="floatbox"></div> <div class="floatbox"></div> <div id="l"></div>
<div id="l"></div>
</div>