BFC及应用学习总结

zorpan 发布于2019-08-30 15:56 / 655人阅读

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

普通流（Normal Flow）

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

脱离普通流

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

float

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

    
        粉色透明div向左float
    
    
        本该在黄色div中的文字
            环绕粉色div
        
        普通流浅蓝色DIV，与粉色div为兄弟元素，且包含黄色子div

为方便看出浮动元素脱离普通流遮盖效果，我给粉色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）：

一个BFC下，block子元素会垂直排列，且垂直方向上会发生margin合并

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下：

可见margin发生合并

不同BFC下：

margin不合并

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

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

触发BFC清除浮动：

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

去除覆盖效果

    
        粉色透明div向左float
    
    
        普通流浅蓝色DIV，与粉色div为兄弟元素;普通流浅蓝色DIV，与粉色div为兄弟元素;普通流浅蓝色DIV，与
        粉色div为兄弟元素;普通流浅蓝色DIV，与粉色    div为兄弟元素;普通流浅蓝色DIV，与粉色div为兄弟元素;
        普通流浅蓝色DIV，与粉色div为兄弟元素;

显示如下

浮动元素覆盖于div之上，同时文字环绕

但是触发浅蓝色的div之后

overflow: hidden;

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

自适应布局

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

小声逼逼：flex！

总结

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

参考资料

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

专线服务 idc机房托管深度学习及应用深度学习方法及应用应用技巧总结机器学习学习总结

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/117575.html

前端-CSS3&H5

摘要：高度模型浅识为的简写，简称为块级格式化上下文，为浏览器渲染某一区域的机制，中只有和中还增加了和。并非所有的布局都会在开发中使用，但是其中也会涉及一些知识点。然而在不同的纯制作各种图形纯制作各种图形多图预警一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不...

Hydrogen 2019-08-05 12:48 评论0 收藏0
前端-CSS3&H5

摘要：高度模型浅识为的简写，简称为块级格式化上下文，为浏览器渲染某一区域的机制，中只有和中还增加了和。并非所有的布局都会在开发中使用，但是其中也会涉及一些知识点。然而在不同的纯制作各种图形纯制作各种图形多图预警一劳永逸的搞定 flex 布局寻根溯源话布局一切都始于这样一个问题：怎样通过 CSS 简单而优雅的实现水平、垂直同时居中。记得刚开始学习 CSS 的时候，看到 float 属性不...

xiaolinbang 2019-08-29 14:14 评论0 收藏0
JS每日一题: 如何理解CSS中BFC?

摘要：期如何理解中定义块格式化上下文，是页面的可视化渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。 20190416期如何理解CSS中BFC? 定义: 块格式化上下文（Block Formatting Context，BFC）是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。 BFC 特性及应用同一个...

lentoo 2019-08-23 16:58 评论0 收藏0
前端经典文章

摘要：上周末看这篇文章时，偶有灵光，所以，分享出来给大家一起看看前端面试四月二十家前端面试题分享请各位读者添加一下作者的微信公众号，以后有新的文章，将在微信公众号直接推送给各位，非常感谢。前端切图神器 avocode 有了这个神器，切图再也腰不酸，腿不疼了。这一次，彻底弄懂 JavaScript 执行机制本文的目的就是要保证你彻底弄懂javascript的执行机制，如果读完本文还不懂，...

lowett 2019-08-22 13:58 评论0 收藏0
CSS中重要的BFC

摘要：中有个重要的概念，搞懂可以让我们理解中某些原本诡异的地方。简介在解释之前，先说一下文档流。我们常说的文档流其实分为定位流浮动流普通流三种。使用包含浮动元素注意，这里触发并不能阻止其它形式的脱离文档流的元素覆盖正常流元素。 CSS中有个重要的概念BFC，搞懂BFC可以让我们理解CSS中某些原本诡异(??)的地方。 1. 简介在解释BFC之前，先说一下文档流。我们常说的文档流其实分为定位...

plus2047 2019-08-29 14:20 评论0 收藏0