有写过浮动的人在没有学习清除浮动的时候,都会有这样一种体会,比如说,有两个div,我想把它放到一行,然后选择用浮动来达到自己想要的效果。接下来在写正常文档流的时候,就会发现出现问题,浮动后的正常文档流会在浮动元素的底部显示,浮动元素会把正常元素覆盖掉。。。
如图2(两个浮动的div都是左浮动)图4(两个浮动的div一个是左浮动一个是右浮style="clear:right即可”)。这个bug解决后,所呈现的效果如浮动清除效果1/2所示。
清除浮动的方法
1.给父元素加高度
2.(1)给浮动的元素加一个兄弟空的元素,并加上样式clear:both/cleat:left/clear right
(2)给父元素加伪类:
如:.box:after{
content:””;
display:block;
clear:both;
}
(3)给受影响的元素加样式:clear:both/cleat:left/clear right
3.给浮动元素的父元素加上:overflow:hidden