我的世界之BFC

最新推荐文章于 2024-08-31 17:44:35 发布

YouZi_X

最新推荐文章于 2024-08-31 17:44:35 发布

阅读量2.2k

点赞数

分类专栏： CSS 文章标签： css

本文链接：https://blog.csdn.net/YouZi_X/article/details/107349890

版权

CSS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

什么是BFC？

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

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

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

那么如何形成BFC呢？

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

BFC的布局规则是什么？

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

BFC常用的作用

1）BFC中盒子对齐

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

2）外边距折叠

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

html

<div class="parent">
      <div class="child1"></div>
      <div class="child2"></div>
</div>

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

    <div class="parent">
      <div class="child1"></div>
      <div class="child-box">
        <div class="child2"></div>
      </div>
    </div>

css

    .child-box {
      overflow: hidden;
    }

效果如下

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

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防止环绕