定义
css清除浮动,是为了解决父元素高度坍塌问题,或者也叫浮动溢出问题采取的css处理方案
作用
css清除浮动就是为了防止浮动溢出现象的出现。
什么是浮动溢出现象呢?当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外面而影响(甚至破坏)布局的现象
浮动溢出,其实也叫父元素高度坍塌
清除浮动的方式有哪些
- 父元素一起浮动,不好
- 父元素高度固定,如果容器高度本身固定,给容器设置高度是
最好用最常用的 - 额外标签法,子元素最后新加一个元素,然后设置clear:both,父级双伪元素,但是添加许多无意义的标签,结构化较差。
- 父级添加overflow属性方法,触发浮动元素父元素的 BFC (Block Formatting Contexts, 块级格式化上下文),使到该父元素可以包含浮动元素
- 使用after伪元素清除浮动,子元素最后一个元素设置伪元素,由于IE6-7不支持:after,兼容性问题,
推荐 - 使用before和after双伪元素清除浮动,由于IE6-7不支持:after,兼容性问题,
推荐