BFC：块级格式上下文详解

wyk1184 发布于2019-08-02 16:17 / 1337人阅读

摘要：简要定义直译为块级格式化上下文。它是一个独立的渲染区域，它规定了内部如何布局，是决定块盒子的布局及浮动相互影响范围的一个区域，并且与这个区域外部毫不相干。

1.BFC简要定义

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，它规定了内部如何布局，是决定块盒子的布局及浮动相互影响范围的一个区域，并且与这个区域外部毫不相干。

2.BFC创建方式

根元素或其它包含它的元素；

浮动 (元素的float不为none)；

绝对定位元素 (元素的position为absolute或fixed)；

行内块inline-blocks(元素的 display: inline-block)；

表格单元格(元素的display: table-cell，HTML表格单元格默认属性)；

overflow的值不为visible的元素；

弹性盒 flex boxes (元素的display: flex或inline-flex)

3.BFC内部特性

内部的盒会在垂直方向一个接一个排列（可以看作BFC中有一个的常规流）；

处于同一个BFC中的元素相互影响，可能会发生margin collapse；但不同BFC可以阻止margin collapse

每个元素的margin box的左边，与容器块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此；

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然；

计算BFC的高度时，考虑BFC所包含的所有元素，连浮动元素也参与计算；

浮动盒区域不叠加到BFC上；

4.BFC应用实例 1.BFC清除浮动

将父元素设置一个能让其变为BFC区域的属性，不如overflow：auto




    
    Title
    



    one
    two

2.BFC处理margin collapse

在CSS中，两个或多个毗邻的普通流中的盒子（可能是父子元素，也可能是兄弟元素）在垂直方向上的外边距会发生叠加，这种形成的外边距称之为外边距叠加。这里讲解父子元素，兄弟元素同理。




    
    Title
    



    aaaaaaaaaaaaaa
    bbbbbbbbbbbbbb

BFC改造后

GPU云服务器云服务器格式详解电脑上下载的视频怎么转换格式 bfc bfc布局

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

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

BFC：块级格式上下文详解

摘要：简要定义直译为块级格式化上下文。它是一个独立的渲染区域，它规定了内部如何布局，是决定块盒子的布局及浮动相互影响范围的一个区域，并且与这个区域外部毫不相干。 1.BFC简要定义 BFC(Block formatting context)直译为块级格式化上下文。它是一个独立的渲染区域，它规定了内部如何布局，是决定块盒子的布局及浮动相互影响范围的一个区域，并且与这个区域外部毫不相干。 2.B...

HelKyle 2019-08-30 10:50 评论0 收藏0
BFC：块级格式上下文详解

摘要：简要定义直译为块级格式化上下文。它是一个独立的渲染区域，它规定了内部如何布局，是决定块盒子的布局及浮动相互影响范围的一个区域，并且与这个区域外部毫不相干。 1.BFC简要定义 BFC(Block formatting context)直译为块级格式化上下文。它是一个独立的渲染区域，它规定了内部如何布局，是决定块盒子的布局及浮动相互影响范围的一个区域，并且与这个区域外部毫不相干。 2.B...

Shihira 2019-08-26 18:26 评论0 收藏0
BFC原理详解

摘要：最常见的有简称和简称。可以把它理解成是一个独立的容器，并且这个容器的里的布局，与这个容器外的毫不相干。根据布局规则第二条垂直方向的距离由决定。参考前端精选文摘神奇背后的原理之详解深入理解流体特性和特性下多栏自适应布局布局一.BFC是什么在解释 BFC 是什么之前，需要先介绍 Box、Formatting Context的概念。 1.BOX：CSS布局的基本单位 Box是CSS布局的...

ziwenxie 2019-08-29 11:10 评论0 收藏0
想要清晰的明白（一）： CSS视觉格式化模型|盒模型|定位方案|BFC

摘要：并且这种过程遵循标准的描述只要不是和绝对定位方式布局的，都在普通流里面。定位相对定位在普通流之中，是相对于它在普通流中的位置中进行移动，元素占据原来位置绝对定位脱离普通流，不占据空间相对于距离它最近的那个已定位的祖先相对绝对元素决定的。视觉格式化模型页面(文档树)可以想象成是由一个个的Box组合而成的，而视觉格式化模型(Visual formatting model)是一套规则，将...

Edison 2019-08-30 13:00 评论0 收藏0