但这种效果仅限于行内元素，如果浮动的是块级元素，那么后面的其他块级元素（非浮动）就会自动跑到浮动元素原来所在的位置，产生遮盖效果。
你试试下面的代码，就会发现很多有趣的东西：
<div style="float:leftwidth:100pxheight:100pxbackground-color:red">这个是浮动的块级元素</div>
<div style="width:200pxheight:200pxbackground-color:green">这个块级元素会跑到前一个浮动元素的下面，但你会惊讶地发现，文字则是环绕浮动元素的，不会被遮盖！</div>
浮动主要会影响后面其他的非浮动元素的布局，所以父元素的浮动是必须清除的，子元素也最好清除一下，以免出现一些莫名其妙的现象。我们可以这么来理解：浮动就像是原本在地面的一幢房子忽然漂浮在空中，这样地面上它原本占用的地皮就要被其他新建的房子占用了（这是未清除浮动的情况），如果这时候出一个硬性规定：这个房子的地皮仍然保留，其他房子不得占用，那么后面的其他房子就不需要挪位置了，所有房子的整体布局就不会发生改变（这就是清除浮动的情况）。
不清除浮动的话，浮动层后面的非浮动内容就有可能被浮动层所覆盖，造成版面错乱，所以必须清除浮动。除非浮动层所在的位置是有固定的高度的，也就是说不管是否浮动它所占用的区域都不变，这样就无需清除。比如：1
2
3
4
<div>
<div style="float:leftwidth:100pxheight:100pxbackground-color:#f00"></div>
</div>
<div style="width:200pxheight:200pxbackground-color:#00f"></div>
可以看到蓝色框会被红色框覆盖（IE6-9中则不会，因为它不是标准浏览器）。清除浮动以后就不会了：
1
2
3
4
5
<div>
<div style="float:leftwidth:100pxheight:100pxbackground-color:#f00"></div>
<div style="clear:both"></div>
</div>
<div style="width:200pxheight:200pxbackground-color:#00f"></div>
或者给浮动层预留位置：
1
2
3
4
<div style="width:100pxheight:100px">
<div style="float:leftwidth:100pxheight:100pxbackground-color:#f00"></div>
</div>
<div style="width:200pxheight:200pxbackground-color:#00f"></div>
