css BFC规则

前言

最近要准备面试了，所以总结一下面试中可能要遇到的知识点。今天是 css的一些点。

正文

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

首先是创建BFC的方式：

根元素或包含根元素的元素
浮动元素（元素的 float 不是 none）
绝对定位元素（元素的 position 为 absolute 或 fixed）
行内块元素（元素的 display 为 inline-block）
表格单元格（元素的 display为 table-cell，HTML表格单元格默认为该值）
表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
匿名表格单元格元素（元素的 display为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot的默认属性）或 inline-table）
overflow 值不为 visible 的块元素
display 值为 flow-root 的元素
contain 值为 layout、content或 strict 的元素
弹性元素（display为 flex 或 inline-flex元素的直接子元素）
网格元素（display为 grid 或 inline-grid 元素的直接子元素）
多列容器（元素的 column-count 或 column-width 不为 auto，包括 column-count 为 1）
column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中（标准变更，Chrome bug）
块格式化上下文包含创建它的元素内部的所有内容.
BFC规则
属于同一个 BFC 的两个相邻 Box 垂直排列
属于同一个 BFC 的两个相邻 Box 的 margin 会发生重叠
BFC 中子元素不会超出他的包含块
BFC 的区域不会与 float 的元素区域重叠
计算 BFC 的高度时，浮动子元素也参与计算
文字层不会被浮动层覆盖，环绕于周围
-应用
阻止margin重叠
可以包含浮动元素 —— 清除内部浮动(清除浮动的原理是两个div都位于同一个 BFC 区域之中)
自适应两栏布局
可以阻止元素被浮动元素覆盖
下面列出代码
1.阻止margin重叠
当两个div位于body下时，处在同一BFC下，这时边距会重叠。

      div{
        width: 100px;
        height: 100px;
        background: lightblue;
        margin: 100px;
      }
        <body>
    <div class="">

    </div>
    <div class="">

    </div>
  </body>

在这里插入图片描述

而当两个元素处于两个BFC下，边距不会发生重叠。这里用overoverflow: hidden触发BFC

      .container {
          overflow: hidden;
      }
      p {
          width: 100px;
          height: 100px;
          background: lightblue;
          margin: 100px;
      }
    <div class="container">
        <p></p>
    </div>
    <div class="container">
        <p></p>
    </div>

在这里插入图片描述
2.可以包含浮动元素
先看一个例子

<div style="border: 1px solid #000;">
    <div style="width: 100px;height: 100px;background: #eee;float: left;"></div>
</div>

在这里插入图片描述
这里元素已经脱离了文档流，容器只有2px的高度，那么触发容器的BFC之后呢

<div style="border: 1px solid #000;">
    <div style="width: 100px;height: 100px;background: #eee;float: left;"></div>
</div>

在这里插入图片描述
可以看到容器已经包裹住了浮动的元素
3. BFC 可以阻止元素被浮动元素覆盖

<div style="height: 100px;width: 100px;float: left;background: lightblue">我是一个左浮动的元素</div>
<div style="width: 200px; height: 200px;background: #eee">我是一个没有设置浮动, 
也没有触发 BFC 元素, width: 200px; height:200px; background: #eee;</div>

在这里插入图片描述
这是可以看到其实第二个div已经有些被第一个元素覆盖了，但是文字信息不会不覆盖，我们给第二个元素触发BFC
添加样式 overflow: hidden，可以看到效果如下，

这就可以实现自适应两栏布局

前言

正文

猜你喜欢