关于清除浮动的问题

首先咱们要明确一个问题，一个元素浮动后就脱离了文档流。那么什么是脱离文档流呢？脱离文档流就是这个元素已经不占据页面的空间了，下面我举一个例子来讲明。

demo1:

运行结果以下：

能够看到box的高度已经彻底由浮动元素fd撑开了高度也是400px;box的宽度继承它父级也就是body的宽度100%，因此会出现如图所示的黑色区域。可是我要是给fd一个浮动的话，让咱们再来看看会有什么结果。

关键代码：（其他部分不发生改变）

运行结果是；

如今已经彻底看不到黑色的区域了，也就是如今的box高度为0；这也就是我上面所说的浮动元素脱离了文档流，它的父级已经不能由fd撑开了，那么咱们该怎么办才能让box有具体的高度呢？这里介绍四种方法。

方法1:给box加上overflow:hidden;

运行结果：

方法2：给box一个具体的高度

运行结果：

3.给fd增长一个兄弟元素，并在兄弟元素样式上增长clear:both;

运行结果：

 4.用伪类来解决

运行结果：

你们明白了吗？