写在最前：BFC看起来是个很陌生的概念但它却时时发生在我们工作中，如何清除浮动影响？如何避免margin穿透问题？如何编写两栏自适应布局？都和BFC有这密不可分的关系，下面走进切图妞的世界，分分钟搞定BFC！一、什么是BFC？
BFC概念
块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。简而言之，BFC就是一种边距重叠的解决方案。
BFC原理
BFC内部元素的元素在垂直方向上的边距会发生重叠
BFC不会与浮动元素重叠
BFC是独立的容器，不会影响里面的元素，里面的元素也不会影响外面元素
计算BFC元素高度时，浮动元素也会参与计算
二、BFC产生条件主流：
根元素或包含根元素的元素
浮动元素：float不为none(float+float具有包裹性和破坏性导致无法自适应，一般用在块状浮动布局)
绝对定位元素：position不为static或者relative(absolute脱离文档流)
overflow 值不为 visible 的块元素(overflow可自适应，但由于溢出不可见限制了应用场景)
行内块元素：display为inline-block(inline-block具有包裹性，无法自适应,IE8以下无法识别该属性)
表格单元格：元素的 display为 table-cell（HTML表格单元格默认为该值，table-cell具有包裹性，无溢出特性，绝对宽度也能自适应）
非主流：
表格标题：元素的 display 为 table-caption，HTML表格标题默认为该值
匿名表格单元格元素：元素的 display为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot的默认属性）或 inline-table
display 值为 flow-root 的元素
contain 值为 layout、content或 strict 的元素
弹性元素：display为 flex 或 inline-flex元素的直接子元素
网格元素：display为 grid 或 inline-grid 元素的直接子元素
多列容器：元素的 column-count 或 column-width 不为 auto，包括 column-count 为 1
column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中
三、BFC使用场景 1、margin穿透问题1写样式的时候常常怀疑我的margin是被浏览器吞掉了吗？
作为一个子元素想离父元素上边距有50px的距离，正常情况下是这么显示的
.sec { background: #ebf6fd; }
.child { height: 50px;background: #09d;margin-top: 50px; line-height: 50px;}
子元素的margin-top值因为穿透问题没有实现预想效果
解决方法：使父元素变为BFC，添加overflow:hidden的样式，就会实现如下效果
书写列表结构的时候，margin-top为20px,margin-bottom为20px，预想中应该出现40px的效果，但是正常情况下是这样的：
切图妞切图妞切图妞切图妞切图妞切图妞切图妞
切图妞切图妞切图妞切图妞切图妞切图妞切图妞
.margin {background: #ebf6fd;}
.margin p { margin: 20px auto;background: #09d; line-height: 40px;}
margin-top和margin-bottom在垂直方向的边距会发生重叠现象，margin-top和margin-bottom哪个大就间隔哪个的距离。
解决方法：给子元素再创建一个父元素，使父元素是BFC
3、两栏自适应布局
图片与文字组合的结构，我们经常会使图片浮动起来，利用float的包裹性，让文字环绕图片，如下：
.layout {background: #ebf6fd;margin-top: 20px;}
.layout .left { float: left; width: 150px;height: 168px;}
.layout .right {background: #09d;text-align: left; }
但是当我们想把图片和文字的区块独立分来一左一右的时候呢？
解决方法：使右侧元素为BFC，添加overflow:hidden的样式
img src="img/bqb1.jpg" class="left" alt="" />
当我们需要图片与文字间距20px时，有两种方法：左侧margin-right或者右侧padding-left
4、清除浮动
父元素包含浮动元素，导致父元素塌陷，正常情况如下：
.floatBorder { background: #ebf6fd;border: 1px solid #FFBE00;margin-top: 20px;}
.floatBorder .float { float: left; line-height: 50px; background: #08d;}
父元素塌陷除了border外失去高度，此时需要利用BFC内子元素即使是浮动元素也会参与计算的原理
解决方法：使父元素变成BFC，添加清除浮动类
.clearfix {*zoom: 1 }
.clearfix:after {content: "";display: table; clear: both }
四、结语
具有BFC属性的元素是一个独立的容器，它不受子元素影响也不影响子元素！当margin遇到BFC，边距重叠问题得以解决；当BFC元素身边存在浮动时，它拒绝了float的包裹性独立成一个容器不与其重叠；当浮动元素在BFC元素里面时，计算高度时将内部浮动元素也进行计算，解决了父元素塌陷的问题！
上面示例代码已上传，可下载练习修改→BFC Demo
尊重原创，如需转载请注明出处！
参考资料：
张鑫旭-CSS深入理解之overflow
MDB-块格式化上下文
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/54786.html
写在最前：BFC看起来是个很陌生的概念但它却时时发生在我们工作中，如何清除浮动影响？如何避免margin穿透问题？如何编写两栏自适应布局？都和BFC有这密不可分的关系，下面走进切图妞的世界，分分钟搞定BFC！ 一、什么是BFC？ BFC概念 块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素...
写在最前：BFC看起来是个很陌生的概念但它却时时发生在我们工作中，如何清除浮动影响？如何避免margin穿透问题？如何编写两栏自适应布局？都和BFC有这密不可分的关系，下面走进切图妞的世界，分分钟搞定BFC！ 一、什么是BFC？ BFC概念 块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素...
摘要：写在最前是的一种布局场景。页脚永远固定在页面的底部，页面内容不够长的时候页脚黏在视窗底部，内容足够长时会被向下移动。老式门户网站由于内容过短常常版权页脚前移，移动端特定布局也需要来解决这些问题。 showImg(https://segmentfault.com/img/bVbrIV9?w=200&h=354); 写在最前：Sticky Footer是css的一种布局场景。页脚foot...
摘要：写在最前是的一种布局场景。页脚永远固定在页面的底部，页面内容不够长的时候页脚黏在视窗底部，内容足够长时会被向下移动。老式门户网站由于内容过短常常版权页脚前移，移动端特定布局也需要来解决这些问题。 showImg(https://segmentfault.com/img/bVbrIV9?w=200&h=354); 写在最前：Sticky Footer是css的一种布局场景。页脚foot...
摘要：写在最前是的一种布局场景。页脚永远固定在页面的底部，页面内容不够长的时候页脚黏在视窗底部，内容足够长时会被向下移动。老式门户网站由于内容过短常常版权页脚前移，移动端特定布局也需要来解决这些问题。 showImg(https://segmentfault.com/img/bVbrIV9?w=200&h=354); 写在最前：Sticky Footer是css的一种布局场景。页脚foot...
阅读 529·2021-11-12 10:35
阅读 2737·2021-09-07 09:58
阅读 2177·2021-08-26 14:14
阅读 2491·2019-08-29 13:07
阅读 1908·2019-08-26 11:44
阅读 554·2019-08-26 10:11
阅读 2255·2019-08-23 15:43
阅读 2957·2019-08-23 14:17
