常见清除浮动的方式,你会废了吗?

241 阅读1分钟

终极奥秘:清除浮动的核心要素就是解决浮动之后脱离文档流,父元素塌陷问题,也就是让父元素有足够的高度去包含浮动元素,围绕这一点有几种常见的方式,一起来看看吧

1.给父元素加高度

这个应该不要解释了吧

2.结尾处加个空div,给这个标签加clear:both

在精通css这本书里,就详细的提到里这个方法,我在这大致的讲一下,有兴趣的小伙伴可以去看看,虽然书有点老了,但是还是一本值得去看的书,具体的clear:both的原理也是遵循终极奥秘,浏览器会给清除的元素加上足够的顶外边距,使元素的顶边缘垂直下降到浮动元素的下边,让父级div能自动获取到高度,包含浮动元素

3.使用after伪元素清除浮动

这是目前比较推荐的用法,部分代码如下

.container .top .right:after{
  content: "";
  display: block;
  clear: both;
}

4.最后一个就是给父级元素加overflow:hidden原理就是触发BFC把浮动元素的高度也计算在内的特性

BFC链接