目录
一 常见的定位方案
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属性，这样两个元素就互不干扰。
文章来源：https://www.toymoban.com/news/detail-848798.html
备注：本文是看视频 带你用最简单的方式理解最全面的BFC 后的记录。文章来源地址https://www.toymoban.com/news/detail-848798.html
到了这里，关于了解CSS中的BFC以及用法的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
