对BFC的理解

BFC

块格式化上下文(Block Formatting Context),是web页面的可视化css渲染的一部分,是布局过程中生成块级盒子的区域,也是浮动元素与其他元素的交互限定区域。

通俗理解

BFC是一个独立的布局环境,可以理解为一个容器,在这个容器中按照一定规则进行物品摆放,并且不会影响其外部元素

如果一个元素符合出发BFC的条件,则BFC中的元素布局不受外部影响

浮动元素会创建BFC,则浮动元素内部子元素受该浮动元素影响,所以两个浮动元素之间是互不影响的。

创建BFC
  • 根元素或包含根元素的元素
  • 浮动元素 float = left|right 或 inherit,float 不能等于none
  • 绝对定位元素 position = absolute|fixed
  • display = inline-block|flex|inline-flex|table-cell|table-caption
  • overflow = hidden|auto|scroll 不能等于visible
BFC的特性

BFC是一个独立的容器,它不会影响其外部元素,外部元素也无法影响到它。

BFC内部的元素从顶部开始一个接一个垂直排列,盒子之间的间距是由margin决定的。

在同一个BFC中,两个相邻的块级盒子的垂直外边距会发生重叠。

BFC区域不会和float box发生重叠,因为float box也属于BFC

BFC能够识别并包含浮动元素,当计算其区域的高度时,浮动元素也可以参与计算。

BFC的作用

解决高度塌陷:浮动元素会脱离文档流(绝对定位也会脱离文档流),导致无法计算准确的高度

解决方式:在容器中创建BFC

<style>
    .container {
        overflow: hidden;
        background: green;
    }
    .container .sibling {
        float: left;
        margin: 10px;
        background: red;
    }
</style>

<div class="container">
    <div class="sibling"></div>
    <div class="sibling"></div>
</div>

需要注意的是:

  • 通过 overflow:hidden 创建 BFC,固然可以解决高度塌陷的问题,但是大范围应用在布局上肯定不是最合适的,毕竟 overflow:hidden 会造成溢出隐藏的问题,尤其是与 JS 的交互效果会有影响。
  • 我们可以使用 clearfix 实现清除浮动

外边距折叠

相邻的两个盒子(可能是兄弟关系也可能是祖先关系)的垂直边距相遇时, 它们将形成一个外边距。这个外边距的高度等于两个发生折叠的外边距的高度中的较大者

注意外边距折叠的条件是margin必须相邻

折叠外边距的取值

  • 两个相邻的外边距都是 正数 时,折叠外边距是两者中较大的值。
  • 两个相邻的外边距都是 负数 时,折叠外边距是两者中绝对值较大的值。
  • 两个相邻的外边距是 一正一负 时,折叠外边距是两者相加的和。
<style>
   .container {
       overflow: hidden;//最外面的容器为bfc
   }
   .container .box {
       width: 150px;
       height: 150px;
       background: red;
       margin: 10px;
   }
</style>

<div class="container">
   <div class="box"></div>
   <div class="box"></div>
</div>

外边距折叠(Margin collapsing)只会发生在属于同一BFC的块级元素之间。如果它们属于不同的 BFC,它们之间的外边距则不会折叠。所以通过创建一个不同的 BFC ,就可以避免外边距折叠

<style>
    .container {
        overflow: hidden;//最外面的容器为bfc
        background: blue;
    }

    .container .box {
        width: 150px;
        height: 150px;
        background: red;
        margin: 10px;
    }
    .newBFC {
        overflow: hidden;//创建BFC,解决外边距折叠问题
    }
</style>

<div class="container">
    <div class="box"></div>
    <div class="newBFC">
       <div class="box"></div>
    </div>
</div>
参考博客: https://segmentfault.com/a/1190000013647777

原文地址:https://www.cnblogs.com/TomAndJerry/p/11834046.html

时间: 2024-10-10 07:49:18

对BFC的理解的相关文章

BFC的理解与应用

什么是BFC(Block formatting contexts) BFC的通俗理解: 首先BFC是一个名词,是一个独立的布局环境,我们可以理解为一个箱子(实际上是看不见摸不着的),箱子里面物品的摆放是不受外界的影响的.转换为BFC的理解则是:BFC中的元素的布局是不受外界的影响(我们往往利用这个特性来消除浮动元素对其非浮动的兄弟元素和其子元素带来的影响.)并且在一个BFC中,块盒与行盒(行盒由一行中所有的内联元素所组成)都会垂直的沿着其父元素的边框排列. BFC的运用 在w3c的规范中,除了上

关于css盒子模型和BFC的理解

p.p1 { margin: 0.0px 0.0px 2.0px 0.0px; font: 14.0px ".PingFang SC"; color: #454545 } p.p2 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px "Helvetica Neue"; color: #454545 } p.p3 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px ".P

我对CSS中的BFC的理解

 1.什么是BFC 其实在老师让我们写这篇叫BFC的时候,我跟本不知道有什么BFC的东西. 后来,我找了一些资料,知道了,BFC是Block Formatting Context (块级格式化上下文)的缩写,它是W3C CSS 2.1 规范中的一个概念,是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干. 2.什么情况下会创建BFC CSS规范说明了在下列这些情况下会创建新的block formatti

对 BFC 的理解

对CSS有了解的道友们肯定都知道盒式模型这个概念,对一个元素设置CSS,首先需要知道这个元素是block还是inline类型.而BFC就是用来格式化块级盒子,同样管理inline类型的盒子还有IFC,以及其他的FC.那首先我们就来看一下FC的概念.  Formatting Context:指页面中的一个渲染区域,并且拥有一套渲染规则,他决定了其子元素如何定位,以及与其他元素的相互关系和作用. BFC:块级格式化上下文,它是指一个独立的块级渲染区域,只有Block-level BOX参与,该区域拥

关于由CSS2.1所提出的的BFC的理解与样例

今天在这里谈谈css中BFC.“BFC”是Block Formatting Context的缩写,这个概念是由CSS2.1提出来的,它决定了元素如何对其内容进行定位,以及与其他元素的关系和相互作用.满足以下任何一条件,即可形成“BFC”. 1.float的值不为none. 2.overflow的值不为visible. 3.display的值为table-cell, table-caption, inline-block中的任何一个. 4.position的值不为relative和static.

HTML 中BFC的理解

BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素.反之也如此.包括浮动,和外边距合并等等,因此,有了这个特性,我们布局的时候就不会出现意外情况了. display 属性为 block, list-item, table 的元素,会产生BFC. 给这些元素添加如下属性就可以触发BFC. -float属性不为none -position为absolute或fixed -display为inline-block, table-cell, table-caption, flex

深入理解BFC和Margin Collapse

深入理解BFC和Margin Collapse BFC的理解与应用 首先我们来看看w3c规范对BFC的解释,其实对于这种概念的学习上,我们总是建议首先寻找官方的定义,因为原则上来说官方的才是最权威和正确的,而且还比较详细,千万不要因为看到英文就畏惧不前. 什么是BFC(Block formatting contexts) w3c规范中的BFC定义: 浮动元素和绝对定位元素,非块级盒子的块级容器(例如 inline-blocks, table-cells, 和 table-captions),以及

【转】CSS深入理解流体特性和BFC特性下多栏自适应布局

这篇文章发布于 2015年02月12日,星期四,23:36,归类于 css相关. 阅读 30873 次, 今日 63 次 by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=4588 一.开篇之言 要说web上实现两栏自适应布局的方法,一双手都数不过来.不知大家有没有细想过,为什么这些方法可以实现自适应布局呢? 本文就将深入探讨下流体特性和BFC特性下的两栏自适应布局,还是

深入理解BFC和Margin Collapse(转)

作者写的很详细,感谢分享.来源:http://www.w3cplus.com/css/understanding-bfc-and-margin-collapse.html BFC的理解与应用 首先我们来看看w3c规范对BFC的解释,其实对于这种概念的学习上,我们总是建议首先寻找官方的定义,因为原则上来说官方的才是最权威和正确的,而且还比较详细,千万不要因为看到英文就畏惧不前. 什么是BFC(Block formatting contexts) w3c规范中的BFC定义: 浮动元素和绝对定位元素,