浅谈BFC(块格式化上下文)

在我们的开发中常听到BFC这个词，当要让我说出BFC 是什么，却不能很好的却解释，似懂非懂。反正就是没有清晰的理解，是这两天仔细阅读了相关资料加深自己对BFC理解。 什么是BFC BFC:块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。 BFC是一个独立的布局环境，其中的元素布局是不受外界的影响。 2.如果一个元素符合触发 BFC 的条件，则 BFC 中的元素布局不受外部影响。 3.浮动不会影响其它BFC中元素的布局，而清除浮动只能清除同一BFC中在它前面的元素的浮动。 4.块格式化上下文包含创建它的元素内部的所有内容. 5.在一个 BFC 中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。 怎样才能形成BFC 浮动元素 float的值不为none。 绝对定位元素（元素的 position 为 absolute 或 fixed） overflow值不为 visible 的块元素 display值为 flow-root的元素 display的值为table-cell, table-caption, inline-block中的任何一个。 position的值不为relative和static。 实际代码中理解BFC 1.让浮动内容和周围的内容等高 在实际开发中我们会遇到浮动元素超出了父元素的高度。 1575904227(1).jpg 创建一个会包含这个浮动的BFC，通常的做法是设置父元素 overflow: auto 或者设置其他的非默认的 overflow: visible 的值。 .outer { border: 5px dotted rgb(214,129,137); width: 450px; overflow: hidden; } 1575904393(1).jpg 2.不和浮动元素重叠 如果一个浮动元素后面跟着一个非浮动的元素，那么就会产生一个覆盖的现象，很多自适应的两栏布局就是这么做的。比如下图的效果，参考例子 1575904599(1).png 由于两个box都处在同一个BFC中，都是以BFC边界为起点，如果两个box本身都具备BFC的话，会按顺序一个一个排列布局,我们这时可以触发main生成BFC。 .main { height: 200px; background: #fcc; overflow: hidden; } 1575904889(1).jpg

本文章由javascript技术分享原创和收集