了解CSS中的BFC以及用法

目录

一 常见的定位方案

1. 普通流（所有元素默认为普通流的定位）

2. 浮动

3. 绝对定位

二  BFC 

1. 定义

2. 触发条件

3. 作用

（1） 避免外边距重叠

​（2）清除浮动

（3） 阻止元素被浮动元素覆盖

---

一 常见的定位方案

        首先，先了解一下常见的定位方案。有三种：普通流（默认）、浮动、绝对定位。

1. 普通流（所有元素默认为普通流的定位）

2. 浮动

3. 绝对定位

二  BFC 

1. 定义

        BFC 即 Block Formatting Contexts (块级格式化上下文)，属于上面提到的定位方案中的普通流。
        我们可以把BFC看成页面中的一块渲染区域。它有自己的渲染规则。简单来说，BFC可以看作元素的一种属性，当元素拥有了BFC这个属性的时候，这个元素就可以看作是隔离了的独立容器。容器里面的元素不会在布局上影响到外面的元素。

2. 触发条件

        如果元素种有以下任一属性，就将触发BFC。

3. 作用

（1） 避免外边距重叠

        外边距重叠现象：如下代码，希望的结果是，上下两个div的间距应该是200px，但是实际上只有100px。原因：块的上外边距margin-top 和下外边距 margin-bottom 会合并为单个边距，其大小为单个边距的最大值。如果这两个边距相等的话，则为其中一个。

解决办法：

        将两个div放到不同的BFC中。那么这两个BFC中的内容将不会相互干扰。代码如下：

（2）清除浮动

        示例：以下定义两个div，呈父子关系，并为子元素设置float:left。理想情况是一个红色边框包裹一个蓝色方块。但是实际效果如下。原因是：子元素设置了浮动，脱离了文档流，所以就只剩下了2px的边框高度。

解决办法：

        给父容器添加overfloat：hidden 属性，触发父容器的BFC，那么父容器就会包含子容器，从而达到了清除浮动的作用。

（3） 阻止元素被浮动元素覆盖

        示例：如下两个div，其中一个设置了浮动，可以看到浮动的元素覆盖到了没有设置浮动的元素之上。原因：设置了浮动的元素脱离了文档流，就导致元素重叠。

解决办法：

        触发正常元素的BFC属性。在第二个元素中加上overfloat属性，这样两个元素就互不干扰。

备注：本文是看视频 带你用最简单的方式理解最全面的BFC 后的记录。