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

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

定义div元素浮动之后，无法撑开父级元素，当定义父级宽度足够时里面的元素才能够浮动显示

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

方法一：

将父元素也设置为浮动

<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>

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