我的世界之BFC

缺乏、安全感 2023-02-26 08:29 6阅读 0赞

## 什么是BFC？ ##

Block formatting context：块级格式化上下文（直译）。

BFC是一个独立的渲染区域，是Web页面中盒模型布局的CSS渲染模式，其中的元素布局和定位不受外界的影响，并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。

因为这个“不受外界影响”这个特性，可以用来清除浮动，解决margin塌陷，不被浮动元素覆盖（文字环绕）等。

## 那么如何形成BFC呢？ ##

1.  float 除 none 以外的值；
2.  position（absolute，fixed）；
3.  display 为以下其中之一的值 inline-blocks，table-cells，table-captions；
4.  overflow 除了 visible 以外的值（hidden，auto，scroll）；
5.  <html>根元素；

## BFC的布局规则是什么？ ##

1.  内部的Box会在垂直方向，一个接一个地放置。
2.  Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠【margin塌陷】
3.  每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
4.  BFC的区域不会与float box重叠。【解决文字环绕】
5.  BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。【解决margin塌陷】
6.  计算BFC的高度时，浮动元素也参与计算【清除浮动】

## BFC常用的作用 ##

### 1）BFC中盒子对齐 ###

对比IFC(行内格式化上下文)的特性，盒子在水平方向一个接着一个排列。块级格式化上下文里的块级盒会在垂直方向一个接着一个排列，即便不在bfc里块级盒子也是垂直排列的。

### 2）外边距折叠 ###

在常规情况下，两个兄弟盒子之间的垂直距离是由他们最大的外边距决定，而不是外边距之和。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lvdVppX1g_size_16_color_FFFFFF_t_70][]

html

css

.parent{
       overflow: hidden;
    }
    
    .parent .child1,
    .parent .child2 {
       background-color: salmon;
       height: 50px;
    }
    
    .child1 {
       margin-bottom: 30px;
    }
    
    .child2 {
       margin-top: 50px;
    }

从上面的例子可以看出，两个盒子是50px而不是80px，因为垂直外边产生折叠，间距以较大的为准。如何解决呢？使用规则第5条，创建子元素BFC，任意选择其中一个子元素创建BFC。方法如下：

html

css

.child-box {
          overflow: hidden;
        }

效果如下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lvdVppX1g_size_16_color_FFFFFF_t_70 1][]

### 3）不被浮动元素覆盖（解决文字环绕） ###

![20200715001023100.png][]

html

<div class="float">
          <div class="item">我是aa里內容</div>
          <div class="item">
            我是bb里內容我是bb里內容我是bb里內容我是bb里內容我是bb里內容我是bb里內容我是bb里內容我是bb里內容我是bb里內容我是bb里內容我是bb里內容我是bb里內容我是bb里內容我是bb里內容我是bb里內容我是bb里內容我是bb里內容我是bb里內容我是bb里內容我是bb里內容我是bb里內容我是bb里內容
          </div>
     </div>

css

.item {
          height: 50px;
        }
    
        .item:nth-child(1) {
          float: left;
          width: 50px;
          background-color: sandybrown;
        }
    
        .item:nth-child(2) {
          height: 100px;
          background-color: seagreen;
          /* 激活BFC */
          /* 该div会自动适应宽度 */
          /*  overflow: hidden; */
        }

利用BFC防止环绕

![20200715001315270.png][]

### 4）清除浮动 ###

清除浮动常用的方法overflow:hidden，因为浮动的子盒子无法撑出处于标准文档流的父盒子的height。

![2020071500175122.png][]

创建BFC清除浮动后【为显示区别，父元素加了阴影效果】

![20200715001920447.png][]

此处利用规则6：计算BFC的高度时，浮动元素也参与计算

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lvdVppX1g_size_16_color_FFFFFF_t_70]: /images/20230209/1ab561a2722244789adede6b348fdf57.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1lvdVppX1g_size_16_color_FFFFFF_t_70 1]: /images/20230209/82ebf03121584eb49f422079f802829e.png
[20200715001023100.png]: /images/20230209/9b6ce8c1c9174ab88ae9a6c1cc35529c.png
[20200715001315270.png]: /images/20230209/dce4d91148ee4abd8d6934e0c55c8583.png
[2020071500175122.png]: /images/20230209/e1f17fa57e04461aa79ea544cf12261e.png
[20200715001920447.png]: /images/20230209/76ddcafeec4848cc93ae01ec2921e6a2.png