说下清除浮动?

64 阅读1分钟

定义

css清除浮动,是为了解决父元素高度坍塌问题,或者也叫浮动溢出问题采取的css处理方案

作用

css清除浮动就是为了防止浮动溢出现象的出现。

什么是浮动溢出现象呢?当容器的高度为auto,且容器的内容中有浮动(float为left或right)的元素,在这种情况下,容器的高度不能自动伸长以适应内容的高度,使得内容溢出到容器外面而影响(甚至破坏)布局的现象

浮动溢出,其实也叫父元素高度坍塌

清除浮动的方式有哪些

  • 父元素一起浮动,不好
  • 父元素高度固定,如果容器高度本身固定,给容器设置高度是最好用最常用的
  • 额外标签法,子元素最后新加一个元素,然后设置clear:both,父级双伪元素,但是添加许多无意义的标签,结构化较差。
  • 父级添加overflow属性方法,触发浮动元素父元素的 BFC (Block Formatting Contexts, 块级格式化上下文),使到该父元素可以包含浮动元素
  • 使用after伪元素清除浮动,子元素最后一个元素设置伪元素,由于IE6-7不支持:after,兼容性问题,推荐
  • 使用before和after双伪元素清除浮动,由于IE6-7不支持:after,兼容性问题,推荐