加深理解BFC

yanwei 发布于2019-08-30 13:57 / 3320人阅读

摘要：相关定义是规定中的一个概念。最常见的有简称和简称。中只有和，中还增加了和。布局规则内部的会在垂直方向，一个接一个地放置垂直方向地距离由决定。计算的高度时，浮动元素页参与计算。我们的做法是包一层标签，并转化成。

1、相关定义 1.1 Formatting context

Formatting context是W3C CSS2.1规定中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素如何定位，以及和其他元素的关系和相互作用。最常见的Formatting context有Block formatting context（简称BFC）和Inline formatting context（简称IFC）。
css2.1中只有BFC和IFC，css3中还增加了GFC和FFC。

1.2 BFC定义

BFC(Block formatting context)直译为“块级格式化上下文”。它是独立的渲染区域，只有Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

1.3 BFC布局规则：

内部的Box会在垂直方向，一个接一个地放置；

Box垂直方向地距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠

每个元素的margin box的左边，与包含块border box的左边相接触（对于从左往右的格式化，否则相反）。即便存在浮动也是如此。

BFC的区域不会与float box重叠。

BFC就是页面的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

计算BFC的高度时，浮动元素页参与计算。

2、作用 2.1 可生成BFC的元素

根元素html；

float属性不为none；

position为absolute或fixed；

display为inline-block， table-cell，table-caption，flex， inline-flex；

overflow不为visible；

2.2 场景一：对于两栏或三栏浮动自适应布局，包含块边接触问题。



    我是左边区域块        
    我是右边区域块
    我是中间区域块

中间自适应栏边界会延展左右浮动区域

此时需要把中间栏变成BFC

.left-center-right.float .center {
    background-color: rgb(13, 218, 233);
    height: 200px;
    overflow: hidden;
}

2.3 场景二：子级元素有浮动，父级元素塌陷问题



    我是左边区域块
    我是右边区域块

此时需要将父级元素变成BFC

.all-children-float {
    position: absolute;
}

2.3 场景三：垂直方向margin出现重合



    我是区域块1
    我是区域块2

Box垂直方向的距离margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠。

我们的做法是包一层标签，并转化成BFC。

.wrapper1 {
    overflow: hidden;
}


    
        我是区域块1
            
    我是区域块2

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

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

BFC深入理解

摘要：一直都知道可以清除浮动，但是却不知道这背后的原理。查了众多资料后才发现有这么个东西，写这篇文章一是为了加深记忆，二是为了加深理解。解决方案如下给添加一个属性便会避开计算内层元素的高度。但如果高度有具体的值时，高度超过时还是会被裁剪。一直都知道overflow可以清除浮动，但是却不知道这背后的原理。查了众多资料后才发现有BFC这么个东西，写这篇文章一是为了加深记忆，二是为了加深理解。 ...

yiliang 2019-08-30 14:20 评论0 收藏0
BFC深入理解

摘要：一直都知道可以清除浮动，但是却不知道这背后的原理。查了众多资料后才发现有这么个东西，写这篇文章一是为了加深记忆，二是为了加深理解。解决方案如下给添加一个属性便会避开计算内层元素的高度。但如果高度有具体的值时，高度超过时还是会被裁剪。一直都知道overflow可以清除浮动，但是却不知道这背后的原理。查了众多资料后才发现有BFC这么个东西，写这篇文章一是为了加深记忆，二是为了加深理解。 ...

王陆宽 2019-08-02 10:05 评论0 收藏0
margin合并、塌陷，清除浮动

摘要：合并的外边距的高度等于两个发生合并的外边距的高度中的较大者。那我们怎么办，回到主题清除浮动。你可能忘了伪元素是行内元素，只有块元素才能清除浮动。所以我们最好后，主动清除一下浮动，避免以后遇到很奇怪的问题。这是我的第一篇掘金文章，希望大家不要嫌弃。我还是一名在校大学生，就是想把自己所学到的知识写出来，加深自己的印象，记录自己成长的过程，这篇文章主要是介绍HTML 、 CSS 的一些小知...

Alliot 2019-08-30 15:55 评论0 收藏0
margin合并、塌陷，清除浮动

摘要：合并的外边距的高度等于两个发生合并的外边距的高度中的较大者。那我们怎么办，回到主题清除浮动。你可能忘了伪元素是行内元素，只有块元素才能清除浮动。所以我们最好后，主动清除一下浮动，避免以后遇到很奇怪的问题。这是我的第一篇掘金文章，希望大家不要嫌弃。我还是一名在校大学生，就是想把自己所学到的知识写出来，加深自己的印象，记录自己成长的过程，这篇文章主要是介绍HTML 、 CSS 的一些小知...

MadPecker 2019-08-02 14:01 评论0 收藏0
侧边栏的固定与自适应原来是这样实现的（持续更新）

摘要：规范文档，行内非替换元素背景高度由字体和字体大小决定的，默认处理和行高没关系，不过这只是浏览器现在的处理方法摘自参考。不过实际上这个对样式的影响不是很大或者设置。的值除了也是可以为数值的。的区域不会与重叠。摘要刚看了一个关于前端面试题的帖子，有些css题虽然能答出来，但出于学习的目的与好奇心，觉得有必要加深一下对功能实现原理的了解。整理出一份文档，共勉。正文行内元素的高 ...

sarva 2019-08-30 14:06 评论0 收藏0