浮动元素无法撑开父元素的解决方法

转载链接：http://blog.youkuaiyun.com/xiaobing_hope/article/details/50296009

父容器正常情况下会自动扩高，但是子元素加了浮动后位置不保留，父容器就感觉它不存在了，所以不会扩高。

如何解决不用定义父级元素宽度，里面的子元素可以浮动并且自动撑开父级框：

方法一：

将父元素也设置为浮动（触发父元素生成BFC）

<div style="float: left" class="div0">
    <div class="div1" style="float: left;"></div>
    <div class="div2" style="float: left;"></div>
</div>

这样做的弊端是：会影响父元素下面的元素，导致整个父元素也不占据正常文档流。

解决方法：将父元素下面的元素清除浮动

方法二：

在最后一个浮动子元素后面添加一个空的div，并清除其浮动

<div style="float: left" class="div0">
    <div class="div1" style="float: left;"></div>
    <div class="div2" style="float: left;"></div>
    <div style="clear:both;"></div>
</div>

优先选择方法二，这种方法不影响父元素占据正常文档流。