<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值没有变。