经典样式:
1、图文环绕:
<div style="width:400px;height:10px;background-color: #66CCFF; border: 1px solid #66CCCC;
float:left;">
</div>
<p>内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</p>
2、浮动对象有负边界的情况:

































3.如果一个较宽的子盒子在一个较窄的父盒子中拥有浮属性,子盒子漂浮后不会影响到父盒子的宽度,子盒子超出父盒子的部分会越到父盒子外面,但越出父盒子外的部分不会引起外边文本流的移动,而会直接覆盖在外边文字上面的.
4.如果父盒子不设定高度或者高度为自动,而其子盒子设定了浮动,并且高度超过了父盒子,在标准浏览器中,父盒子高度是不能自适高度,但是这种高度自适应常是我们需要的,如何做到让高度自适应呢,常见的办法是在父级内,浮动子盒子后边加入以下代码:<div style="clear:both"></div>清除掉那个小盒子的浮动。
<div id="box">
<div id="subBox">高度随着内容变大</div>
<div id = "removefloat" style="clear:both"></div>
</div>
5.没有设定宽度而又没有内容的对象浮动后宽度会趋近于0。
6.
并排的同一浮动方向的对像在一行中放不下时,可以自动换行;
浮动盒子在本文流中出现的位置会影响它的水平浮动位置,就像下面运行框效果,那些盒子并不是紧跟着一起出现的,之间有文本存在,所以结果造成所有等高的盒子并不是同一直线排列出现,而变成有一定的梯度。如果两个盒子之间文本流区块高度大于前边浮动元素高度时,紧接着的同一浮动方向的对象将会被自动换行显示;
------------------ clear ------------------------------------
1.如果你想一段文本流两边可以出现浮动对像的话,你可以用clear:none,看下面效果,蓝色背景段落两边的盒子是浮动的哦。
2.如果你要为一个网页准备一个页脚区块,比如<div id=”footer”></div>,你在设计网页的时候,你想不管你前边怎么浮动排版而又不想这个页脚跟上去,让它一直保持在前边内容后边,而且还是换行独立显示的,那么给这个页脚区块样式加个clear:both吧。