六 层级元素的清除浮动
原始结构：可以看到，当前父元素没有声明宽高,它的高度是由子元素的高度撑起来的，宽度默认100%
让子元素左浮动，可以发现高度塌陷，父元素包不住子元素
这是因为：子元素浮动之后,脱离了文档流,它与原来的父级元素就没有了关联,所以父级直接压缩了,无法再包住子元素
让父元素仍然包住子元素有以下方法
1 让父元素一起浮动（左浮动右浮动都可以）,让它包住浮动的子元素
2 给父元素设置内容溢出隐藏功能 overflow: hidden
3 添加一个多余的空元素来清除浮动（现在基本不用这种方式了）
子元素的下面添加一个空的div什么都不做，只添加一个样式clear:both
第3种方式经测试也能实现要求,这种方法是最简单最直观,而且没有任何兼容问题
但却有一个致命的问题,那就是给当前的子元素列表中添加了一个无用的元素,当我们用js和php等脚本语言进行数据遍历的时候会非常麻烦
因为这个元素并不是我们需要的,必须单独的进行处理,那么有没有一种二全其美的方案:即保证兼容性,又不用添加新元素呢?
有,用我们之前学过的伪元素来解决
4 给父元素添加:after伪类,在后面添加一个空元素,直接设置它的属性即可
如果ie下显示有问题,可以加上
有的代码里面是这样写的：
下面的空格使用的是ut8编码
本文作者为BUG之神，转载请注明。