摘要：一概念即块级格式化上下文，它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。通俗一点来讲，可以把理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。
一、BFC概念
BFC 即 Block Formatting Contexts (块级格式化上下文)，它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。
具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。
通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。
二、触发只要元素满足下面任一条件即可触发 BFC 特性：
body 根元素
浮动元素：float 除 none 以外的值
绝对定位元素：position (absolute、fixed)
display 为 inline-block、table-cells、flex
overflow 除了 visible 以外的值 (hidden、auto、scroll)
三、BFC的特性及应用 1.同一个BFC下外边距会发生重叠 代码如下
BFC
运行结果如下图：
从效果上看，因为两个 div 元素都处于同一个 BFC 容器下 (这里指 body 元素) 所以第一个 div 的下边距和第二个 div 的上边距发生了重叠，所以两个盒子之间距离只有 50px，而不是 100px
使用BFC原理修改后的代码如下：
BFC
这个时候，两个盒子之间的边距就是100px，运行结果如下图：
2.BFC 可以包含浮动的元素（清除浮动）
我们都知道，浮动的元素会脱离文档流，看例子：
BFC
运行结果如下图：
由于浮动元素脱离文档流，所以容器只剩下了2px的高度，如果触发BFC，那么容器就会包裹浮动元素
BFC清除浮动的影响
运行结果如下图
3.BFC 可以阻止元素被浮动元素覆盖
BFC
我是一个没有浮动，没有触发BFC的元素.width:200px;
height:300px;
background:#f0f;
运行结果如下图：
这个时候，第一个浮动的元素已经覆盖了第二个元素，但是文本内容不会被覆盖，如果第二个元素触发BFC，即第二个元素添加overflow:hidden;就会变成
持续更新，欢迎大家指教！文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/116929.html
摘要：一概念即块级格式化上下文，它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。通俗一点来讲，可以把理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。 一、BFC概念 BFC 即 Block Formatting Contexts (块级格式化上下文)，它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子...
摘要：盒模型与本文为收集整理总结网上资源旨在系统复习盒模型与节省复习时间阅读分钟什么是盒模型每一个文档中，每个元素都被表示为一个矩形的盒子它都会具有内容区盒模型主要分两种标准盒模型盒模型怪异盒模型两者的区别标准盒模型的宽高则为内容区域的宽高盒模型 css盒模型与BFC 本文为收集整理总结网上资源 旨在系统复习css盒模型与bfc 节省复习时间 阅读10分钟 什么是盒模型 每一个文档中，每...
摘要：盒模型与本文为收集整理总结网上资源旨在系统复习盒模型与节省复习时间阅读分钟什么是盒模型每一个文档中，每个元素都被表示为一个矩形的盒子它都会具有内容区盒模型主要分两种标准盒模型盒模型怪异盒模型两者的区别标准盒模型的宽高则为内容区域的宽高盒模型 css盒模型与BFC 本文为收集整理总结网上资源 旨在系统复习css盒模型与bfc 节省复习时间 阅读10分钟 什么是盒模型 每一个文档中，每...
首先回顾一下普通流，普通流对后面进一步了解BFC有很大的作用 普通流（Normal Flow） 普通流是网页中元素的默认排版，默认情况下 块级元素：以block flow direction排列（每一个块级元素新起一行，即以从上往下以列排列） 行内元素：不会另起一行，一个接一个排布，直到空间不足 脱离普通流 CSS有以下几种方法使元素脱离普通流 float float能够使元素向某一方向偏移，...
阅读 2544·2021-09-06 15:01
阅读 1428·2021-09-02 15:41
阅读 848·2021-09-02 15:11
阅读 1130·2021-07-28 00:15
阅读 2088·2019-08-30 15:55
阅读 985·2019-08-30 15:54
阅读 1516·2019-08-30 15:54
阅读 2815·2019-08-30 14:02
