BFC及应用学习总结

首先回顾一下普通流,普通流对后面进一步了解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
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞