关于浮动与清除浮动

标签：

<div class=‘parent‘>

　　<div style=‘float:left‘></div>

</div>

当给一个子元素设置浮动属性时，这个子元素就脱离了文档流，从形式上不再属于父元素，因此它的父元素的高度就会受到影响，内容不被撑开，为了清除子元素浮动带来的负面影响，可以有以下方法解决

1,给直接父元素设置inline-block或float属性(不推荐)

2,在浮动的子元素后面加上br标签并设置clear属性，如<br style=‘clear:both‘/>

3,给直接父元素设置伪类,如.parent:after{content:‘‘,display:block;clear:both} (推荐)

后续思考:为什么在浮动的元素后面增加一个元素，且设置clear属性后，父元素的内容高度就会被撑开，因为父元素的高度由最后一个子元素的底(bottom)在页面中的位置决定的。整个页面是坐标，从左上角0,0点开始，所以，从上面的例子看，当子div浮动后，父div没有子元素了，高度就是一条线（如果没有给父元素设置固定高度的话），我们知道如果浮动元素后面还有其他元素，如果不清除浮动，它就会占领浮动元素的位置(往上移),所以在浮动元素后加一个元素，且清除浮动，哪怕它的高度是0，父元素也会被撑开，因为父元素的最后一个子元素保持在页面坐标中的Y值没有变。

关于浮动与清除浮动

标签：

原文地址：http://www.cnblogs.com/toward-the-sun/p/4734737.html