BFC及应用学习总结

2019年9月13日 158次阅读 来源: Jonithan

首先回顾一下普通流，普通流对后面进一步了解BFC有很大的作用

普通流（Normal Flow）

普通流是网页中元素的默认排版，默认情况下
块级元素：以block flow direction排列（每一个块级元素新起一行，即以从上往下以列排列）
行内元素：不会另起一行，一个接一个排布，直到空间不足

脱离普通流

CSS有以下几种方法使元素脱离普通流

float

float能够使元素向某一方向偏移，直接看demo

    <div style="background-color: pink; opacity: 0.5; height: 100px;width: 100px; float: left">
        粉色透明div向左float
    </div>
    <div style="background-color: lightblue; width: 400px; height: 400px;">
        <div style="background-color: yellow; width: 50px; height: 50px;">本该在黄色div中的文字
            环绕粉色div
        </div>
        普通流浅蓝色DIV，与粉色div为兄弟元素，且包含黄色子div
    </div>

《BFC及应用学习总结》

为方便看出浮动元素脱离普通流遮盖效果，我给粉色div加了透明度，可以直接看出其覆盖了蓝色div中的黄色div，同时因为文字会环绕浮动div，故黄色div的文字置于了粉色div下方
（float的本来用处是为了实现文字环绕）

absolute与fixed

这两种情况相对浮动更易于理解，自己动手实验就好啦

display:none

会使dom节点不在渲染树中，不再有分配空间

BFC

简介

先看下FC，即Formatting Context（格式化上下文），是W3C CSS2.1中的一个概念，指页面的一块渲染区域，有对应的渲染规则（BFC与IFC），决定子元素如何定位，及和其他元素之间的关系和相互影响

而BFC即Block Formatting Contexts，触发BFC特性的元素会有以下影响（我翻译水平较低，内容来自W3C BFC）：

  1. 一个BFC下，block子元素会垂直排列，且垂直方向上会发生margin合并
  2. BFC中的元素的左外边缘会touch到BFC容器的左边缘（右边同理，这个元素同时包括浮动元素）

结合上述两点，各个blog上有这样的总结：

BFC元素特性表现原则就是，内部子元素再怎么翻江倒海，翻云覆雨都不会影响外部的元素。所以，避免margin穿透啊，清除浮动什么的也好理解了。（摘自张鑫旭blog https://www.zhangxinxu.com/wordpress/2015/02/css-deep-understand-flow-bfc-column-two-auto-layout）

什么情况下会触发BFC呢，主要有以下几种情况

  • 根元素，即HTML标签
  • 浮动元素：float值为left、right
  • overflow值不为 visible，为 auto、scroll、hidden
  • display值为 inline-block、table-cell、table-caption、table、inline-table、flex、inline-flex、grid、inline-grid
  • 定位元素：position值为 absolute、fixed
tips：
W3C文档对触发的更清晰描述：Floats, absolutely positioned elements, block containers (such as inline-blocks, table-cells
, and table-captions) that are not block boxes, and block boxes with 'overflow' other than 'visible' (
except when that value has been propagated to the viewport) establish new block formatting contexts for
 their contents.

应用

BFC有很多方面应用，了解BFC特点后，很多操作也知道原理了

避免margin合并(margin collapse)

同一个BFC下：

    <div style="width: 100px;height: 100px;background-color: pink; margin: 20px;" > </div>
    <div style="width: 100px;height: 100px;background-color: pink; margin: 20px;" > </div>

《BFC及应用学习总结》
可见margin发生合并

不同BFC下：

    <div style="overflow: hidden;">
        <div style="width: 100px;height: 100px;background-color: pink; margin: 20px;" > </div>
    </div>

    <div style="overflow: hidden;">
        <div style="width: 100px;height: 100px;background-color: pink; margin: 20px;" > </div>    
    </div>

《BFC及应用学习总结》
margin不合并

包含浮动元素（清除浮动）

这只是清除浮动的一种方式而已，而且也有一些局限性，但做个例子说明BFC的应用
未清除浮动：

    <div style="border: 1px solid black;">
        <div style="float: left;width: 100px;height: 100px;background-color: pink;" ></div>
    </div>

《BFC及应用学习总结》
触发BFC清除浮动：

    <div style="border: 1px solid black;overflow: hidden;">
        <div style="float: left;width: 100px;height: 100px;background-color: pink;" ></div>
    </div>

《BFC及应用学习总结》

题外小声逼逼：使用浮动需谨慎

去除覆盖效果

    <div style="background-color: pink; opacity: 0.5; height: 100px;width: 100px; float: left">
        粉色透明div向左float
    </div>
    <div style="background-color: lightblue; width: 400px; height: 400px;">
        普通流浅蓝色DIV，与粉色div为兄弟元素;普通流浅蓝色DIV，与粉色div为兄弟元素;普通流浅蓝色DIV，与
        粉色div为兄弟元素;普通流浅蓝色DIV，与粉色    div为兄弟元素;普通流浅蓝色DIV，与粉色div为兄弟元素;
        普通流浅蓝色DIV，与粉色div为兄弟元素;
    </div>

显示如下
《BFC及应用学习总结》
浮动元素覆盖于div之上，同时文字环绕

但是触发浅蓝色的div之后

overflow: hidden;

《BFC及应用学习总结》

此时文字信息为匿名块框,所以原理还是BFC的第二个特点：BFC中的元素的左外边缘会touch到BFC容器的左边缘（右边同理，这个元素同时包括浮动元素），分离形成此效果

自适应布局

结合上述的去除覆盖效果与div默认的width:auto可以实现自适应布局，但是也有很多局限性，比如overflow:hidden很多场景不适合使用等等

小声逼逼：flex！

总结

知道原理可以让人少犯某些页面的布局错误
内容有不妥之处请大佬指出
小声逼逼：float使用需谨慎！

参考资料

Normal Flow——MDN
CSS深入理解流体特性和BFC特性下多栏自适应布局
W3C BFC
10 分钟理解 BFC 原理
CSS 匿名文本和匿名框

    原文作者：Jonithan
    原文地址: https://segmentfault.com/a/1190000018602306
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞