以div元素为例。div元素的高度会通过内容自动撑开。也就是说，内容有多少，高度就有多高。但是当内部元素设置了float属性之后，会是父元素高度塌陷。代码和实例如下。
XML/HTML Code复制内容到剪贴板
<div class="container">
<p>
Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!
</p>
</div>
如下，塌陷后css和demo。
CSS Code复制内容到剪贴板
.container {
width: 300px;
border: 1px solid black;
}
.container p {
float: left;
}
3：清除浮动的方法
那么问题来了，如果内部元素要设置浮动，那如何避免父元素高度塌陷的问题呢？
有同学肯定会想，直接在父元素设置高度不就可以了吗？这在实际中是不行的。因为如果固定了父元素的高度，那如果之后想在其添加内容，不是又要去修改css代码了，特麻烦。
那解决父元素高度塌陷有两种方法。
3.1：父元素底部添加空div，然后在添加属性clear : both。
代码如下。
XML/HTML Code复制内容到剪贴板
<div class="container">
<p>
Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!Hello World!
</p>
<div class="clearfix"></div>
</div>
CSS Code复制内容到剪贴板
