CSS中的BFC与清除浮动

2022-01-24 158 阅读1分钟

一句话介绍

在网上随便一搜，有很多介绍 BFC 的文章，介绍的都差不多。

BFC 即块级格式化上下文，Block Formatting Context 。

触发条件

浮动元素（元素的 float 不是 none）
绝对定位元素（元素的 position 为 absolute 或 fixed）
行内块 inline block 元素
overflow 值不为 visible 的块元素
弹性元素（display为 flex 或 inline-flex元素的直接子元素）
……

BFC的作用

解决垂直方向上的 margin 合并问题
清除浮动（当然这个有更好的解决方案，例如 .clearfix ）
自适应布局（在弹性布局 Flex 流行的今天这一点似乎也失去了意义）

清除浮动

既然提到了就多说几句清除浮动的方法，上述提到的 .clearfix 是指以下代码：

.clearfix:after{
     content: '';
     display: block; /*或者 table*/
     clear: both;
 }
 .clearfix{
     zoom: 1; /* IE 兼容*/
 }

当然另一种方法就是给父元素加上 overflow:hidden，这一种方法就是利用 BFC 来清除浮动。

参考链接

（完）