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