块级格式化上下文(BFC)

TerryCai 发布于2019-08-29 15:22 / 2537人阅读

摘要：可以阻止元素被浮动元素覆盖浮动元素的块级兄弟元素会无视浮动元素的位置，尽量占满一整行，这样就会被浮动元素覆盖，为该兄弟元素触发后可以阻止这种情况的发生。

一、什么是BFC

具有BFC属性的元素也属于普通流定位方式，与普通容器没有什么区别，但是在功能上，具有BFC的元素可以看做是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且具有普通容器没有的一些特性，比如包含浮动元素，以防止出现高度塌陷问题。

总之，BFC就是一种属性，这种属性会影响着元素的定位及与其兄弟元素之间的相互作用。

二、BFC的用途

从整体上看，BFC是隔离了的容器：

1、BFC会阻止外边距折叠

折叠：两个相邻的盒子（可能是兄弟关系也可能是祖先关系）的垂直外边距可以合并成一个多带带的垂直外边距。这种合并外边距的方式被称为折叠。

在同一个BFC中，两个相邻的块级元素在垂直方向上的外边距会发生叠加，具体的叠加规则如下：

当两个块级元素的外边距都为正数时，取较大者

当两个块级元素的外边距都为负数时，取较大者

当一正一负时，为两者的和

根据上面的定义可知，发生折叠的条件是：两个块级元素位于同一个BFC中，因而要阻止外边距折叠只需要产生新的BFC。

创建了BFC的元素，不和它的子元素发生外边距折叠。因而如果同一级中的块级元素发生折叠情况(兄弟关系)，不能在元素本身上产生BFC属性，而应该给任意一个元素新建一个BFC容器(新增父级元素并设置为新的BFC，例如设置overflow:hidden;)。如果是祖先关系，则只需要触发父级BFC。

A、兄弟关系外边距折叠

/*兄弟关系阻止折叠方法*/

B、祖先关系折叠

2、BFC可以包含浮动元素

未给child加float属性前：

给child加float属性后：

从上面两个对比图可以发现，加了float属性后，包含child类的div脱离普通/标准文档流，外层div高度塌陷。

触发BFC

使用overflow: hidden;触发BFC属性，就可以承载具有float属性的元素了。

3、BFC可以阻止元素被浮动元素覆盖

浮动元素的块级兄弟元素会无视浮动元素的位置，尽量占满一整行，这样就会被浮动元素覆盖，为该兄弟元素触发BFC后可以阻止这种情况的发生。经常在布局中使用。



  222
222
222
222
222
222
  222
222
222
222
222
222
  222
222
222
222
222
222

触发BFC

三、如何触发BFC

浮动元素：float除none以外的值

绝对定位元素：position(absolute、fixed)

display为以下其中之一的值inline-block、flex、inline-flex、table-cell、table-caption

overflow除了visible以外的值(hidden、auto、scroll)

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

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

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

20170601-BFC(块级格式化上下文)

摘要：的全称是块级格式化上下文。浮动绝对定位的元素定位块容器属性为带有属性该属性值不为和的为的块级元素会在其内部建立新的块级格式化上下文。使用可以解决以下问题父子元素的上下合并问题文字围绕浮动元素的问题和子元素浮动导致父元素高度为的问题。 BFC BFC的全称是Block Format Content -- 块级格式化上下文。浮动、绝对定位的元素(absolute、fixed定位)、块容器(...

PAMPANG 2019-08-29 12:41 评论0 收藏0
20170601-BFC(块级格式化上下文)

摘要：的全称是块级格式化上下文。浮动绝对定位的元素定位块容器属性为带有属性该属性值不为和的为的块级元素会在其内部建立新的块级格式化上下文。使用可以解决以下问题父子元素的上下合并问题文字围绕浮动元素的问题和子元素浮动导致父元素高度为的问题。 BFC BFC的全称是Block Format Content -- 块级格式化上下文。浮动、绝对定位的元素(absolute、fixed定位)、块容器(...

weknow619 2019-08-01 16:56 评论0 收藏0
视觉格式化模型之BFC

摘要：详见权威指南块级元素即块级元素是源文档中被格式化为块的元素，或者属性为的元素。概念顾名思义块级格式化上下文。每个元素的的左边，与包含块的左边相接触对于从左往右的格式化，否则相反。情景：浮动的高度塌陷时，使用overflow：hidden可使父元素将浮动的子元素包含起来，解决问题。但背后的原理是什么？这就是今天要谈的BFC。在将BFC之前需要先了解几个概念：盒子模型（Box mo...

anyway 2019-08-30 13:18 评论0 收藏0
BFC原理详解

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

ziwenxie 2019-08-29 11:10 评论0 收藏0
十分钟复习CSS盒模型与BFC

摘要：盒模型与本文为收集整理总结网上资源旨在系统复习盒模型与节省复习时间阅读分钟什么是盒模型每一个文档中，每个元素都被表示为一个矩形的盒子它都会具有内容区盒模型主要分两种标准盒模型盒模型怪异盒模型两者的区别标准盒模型的宽高则为内容区域的宽高盒模型 css盒模型与BFC 本文为收集整理总结网上资源旨在系统复习css盒模型与bfc 节省复习时间阅读10分钟什么是盒模型每一个文档中，每...

verano 2019-08-02 10:48 评论0 收藏0