什么是BFC？

最新推荐文章于 2024-07-12 20:49:16 发布

A572657111

最新推荐文章于 2024-07-12 20:49:16 发布

阅读量205

点赞数

文章标签： html

本文链接：https://blog.csdn.net/A572657111/article/details/104582247

版权

1.什么是BFC ？

谈到触发及条件我们必须先了解什么是bfc BFC(block formatting context）：简单来说，BFC 就是一种属性，这种属性会影响着元素的定位以及与其兄弟元素之间的相互作用。
直译为块级格式化上下文。它是一个独立渲染区域，只有块级元素参与。它规定了内部的块级元素如何布局，并且与外部元素没有任何关系。

2.布局规则

触发了BFC的盒子有以下特点：
其内部的盒子会在垂直方向排列；

如果BFC盒子中有两个上下排列的盒子，如果上面的盒子设置了margin-bottom，而下面的盒子设置了margin-top，这两个margin值会发生重叠，取两个中较大的值；（解决这种问题的办法是要为这两个容器添加具有BFC的父容器。）

在BFC中，每一个元素左外边（margin-left）与包含块的左边框（border-left）相接触（对于从右到左的格式化，右外边接触右边），浮动元素也是的；

BFC盒子是一个独立的容器，容器里面的子元素如何翻江倒海，都不会影响到外面的元素；同样，外面的元素不会影响到BFC盒子内的元素；（解决margin塌陷问题，清除浮动）

BFC盒子不会与浮动元素发生重叠；（使用该特点可以实现圣杯布局，或者左边固定，右边自适应的布局）

计算BFC的高度时，浮动元素也参与在内。

3.如何触发 BFC

  上面介绍了 BFC 的定义，那么如何触发 BFC 呢？
满足下面任一条件的元素，会触发为 BFC ：
1、浮动元素，float 除 none 以外的值
2、绝对定位元素，position（absolute，fixed）
3、display 为以下其中之一的值 inline-blocks，table-cells，table-captions
4、overflow 除了 visible 以外的值（hidden，auto，scroll）

4.BFC布局与普通文档流布局区别

普通文档流布局规则
1.浮动的元素是不会被父级计算高度
2.非浮动元素会覆盖浮动元素的位置
3.margin会传递给父级
4.两个相邻元素上下margin会重叠

BFC布局规则
1.浮动的元素会被父级计算高度（父级触发了BFC）
2.非浮动元素不会覆盖浮动元素位置（非浮动元素触发了BFC）
3.margin不会传递给父级（父级触发了BFC）
4.两个相邻元素上下margin会重叠（给其中一个元素增加一个父级，然后让他的父级触发BFC）

5.下面来说一下BFC的实际使用场景

场景1：解决子盒子都浮动时父盒子高度不参与计算问题

根据overflow 除了 visible 以外的值（hidden，auto，scroll）就会触发BFC的原则 计算BFC高度时 ，floatbox也参与其中。


场景2：box垂直方向的距离 会由margin来决定 相邻两个盒子之间margin会重叠 ，这就是margin上下间值合并的原因

<style>
p {
    color: pink;
    background: #fcc;
    width: 200px;
    height:100px;
    text-align:center;
    margin: 100px;
}
</style>
<body>
   <p></p>
   <p></p>
</body>

要解决这个问题我们可以在p外面包裹一层容器，并触发该容器生成一个BFC。那么两个P便不属于同一个BFC，就不会发生margin重叠了,解决代码如下。
<style>
   .box {
      overflow: hidden;
   }
   p {
      background: green;
      width: 200px;
      height: 200px;
      margin: 100px;
  }
</style>
<body>
   <p></p>
   <div class="box">
       <p></p>
   </div>

</body>

场景3：实现左侧固定右侧自适应等类似布局
<style>
    .out{
        border: 1px solid red;
        height: 200px;
    }
    .left{
        width: 200px;
        height: 150px;
        background-color: green;
        float: left;
    }
    .right{
        background-color: pink;
        height: 250px;
        overflow: hidden; 
    }
  </style>
  <body>
 <div class="out">
    <div class="left"></div>
    <div class="right"></div>
  </div>

6.介绍几种清除浮动的方法（给浮动元素的父元素清除浮动）：

额外标签法：在父盒子的最后添加一个块级元素，给它设置清除浮动的核心代码（clear：both）；

触发父盒子的BFC；

伪元素清除法：本质上和额外标签上没有区别，但是伪元素是通过css添加的假的元素（默认是行内元素），实际上不存在。

好处：没有额外添加标签，页面结构清晰。

直接定高法（给父元素写死高度）

A572657111

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
什么是BFC？

1.什么是BFC ？谈到触发及条件我们必须先了解什么是bfc BFC(block formatting context）：简单来说，BFC 就是一种属性，这种属性会影响着元素的定位以及与其兄弟元素之间的相互作用。直译为块级格式化上下文。它是一个独立渲染区域，只有块级元素参与。它规定了内部的块级元素如何布局，并且与外部元素没有任何关系。2.布局规则触发了BFC的盒子有以下特点：其...
复制链接

扫一扫