首先我们要明确一个问题，一个元素浮动后就脱离了文档流。那么什么是脱离文档流呢？脱离文档流就是这个元素已经不占据页面的空间了，下面我举一个例子来说明。
demo1:
运行结果如下：
可以看到box的高度已经完全由浮动元素fd撑开了高度也是400px;box的宽度继承它父级也就是body的宽度100%，所以会出现如图所示的黑色区域。但是我要是给fd一个浮动的话，让我们再来看看会有什么结果。
关键代码：（其余部分不发生改变）
运行结果是；
现在已经完全看不到黑色的区域了，也就是现在的box高度为0；这也就是我上面所说的浮动元素脱离了文档流，它的父级已经不能由fd撑开了，那么我们该怎么办才能让box有具体的高度呢？这里介绍四种方法。
方法1:给box加上overflow:hidden;
运行结果：
方法2：给box一个具体的高度
运行结果：
3.给fd增加一个兄弟元素，并在兄弟元素样式上增加clear:both;
运行结果：
4.用伪类来解决
运行结果：
大家明白了吗？