BFC

CSS BFC

参考了

一. 常见的定位方案

在讲 BFC 之前，我们先来了解一下常见的定位方案，定位方案是控制元素的布局，有三种常见方案:

  • 普通流 (normal flow)

在普通流中，元素按照其在 HTML 中的先后位置至上而下布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为完整的一个新行，除非另外指定，否则所有元素默认都是普通流定位，也可以说，普通流中元素的位置由该元素在 HTML 文档中的位置决定。

  • 浮动 (float)

在浮动布局中，元素首先按照普通流的位置出现，然后根据浮动的方向尽可能的向左边或右边偏移，其效果与印刷排版中的文本环绕相似。float只作用与同一BFC下面的元素！

  • 绝对定位 (absolute positioning)

在绝对定位布局中，元素会整体脱离普通流，因此绝对定位元素不会对其兄弟元素造成影响，而元素具体的位置由绝对定位的坐标决定。

二. BFC 概念

先了解box、formating contexts

Box：css布局的基本单位

Box 是 CSS 布局的对象和基本单位，所有HTML元素可以看作盒子， 直观点来说，就是一个页面是由很多个 Box 组成的。元素的类型和 display 属性，决定了这个 Box 的类型。 不同类型的 Box， 会参与不同的 Formatting Context（一个决定如何渲染文档的容器），因此Box内的元素会以不同的方式渲染。

  • block-level box:display 属性为 block, list-item, table 的元素，会生成 block-level box。并且参与 block fomatting context；
  • inline-level box:display 属性为 inline, inline-block, inline-table 的元素，会生成 inline-level box。并且参与 inline formatting context；
  • run-in box: css3 中才有

formatting contexts（格式化上下文）

  • 简单的说是一个决定如何渲染文档的容器

  • 页面上的所有内容都是格式化上下文的一部分

  • formatting contexts有三种

    • block formatting contexts

    • inline formatting contexts

      以后补充

    • flex formatting contexts

      • 使用flex值能将元素渲染成为一个块级容器，而使用inline-flex值则是渲染成一个行内伸缩容器。这些值会将元素格式化，产生flex formatting context（伸缩格式化上下文），这类似于块的格式化上下文，而浮动不会干扰容器，且容器的margins（所有边距）不会随着这些项目被折叠。
      • flex布局经常用到在别的文中讲

BFC

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

BFC是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。

三. 触发 BFC

更多可以参考MDN 以下是最最常用的

  • html 根元素
  • 浮动元素：float 除 none 以外的值
  • 绝对定位元素：position (absolute、fixed)
  • overflow 除了 visible 以外的值
  • display 为 inline-block、table-cells、flex、table-caption或者inline-flex
  • 弹性元素（display为 flex 或 inline-flex元素的直接子元素）
  • 网格元素（display为 grid 或 inline-grid 元素的直接子元素）

四. BFC 特性及应用

1. 同一个 BFC 下外边距会发生折叠

也就是margin外边距重叠了，可以使得他们不在同一个BFC中即可

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>防止margin重叠</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    p {
        color: #f55;
        background: yellow;
        width: 200px;
        line-height: 100px;
        text-align:center;
        margin: 30px;
    }
    div{
        overflow: hidden;
    }
</style>
<body>
    <p>看看我的 margin是多少</p>
    <!-- 这里包裹了一个div使得两个p不在一个BFC中 -->
    <div>
        <p>看看我的 margin是多少</p>
    </div>
</body>
</html>

2. BFC 可以包含浮动的元素（清除浮动）

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

所以对浮动元素的父元素设置overflow:hidden可以触发其BFC 清除浮动

3. BFC 可以阻止元素被浮动元素覆盖，和浮动元素产生边界

下面实现一个两栏自适应布局！！

关键在于样式中right里面有个 overflow: hidden; 使得右边触发BFC不会被浮动元素覆盖了！！！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    body {
        width: 100%;
        position: relative;
    }
 
    .left {
        width: 100px;
        height: 150px;
        float: left;
        background: rgb(139, 214, 78);
        text-align: center;
        line-height: 150px;
        font-size: 20px;
    }
 
    .right {
        overflow: hidden;
        height: 200px;
        background: rgb(170, 54, 236);
        line-height: 20px;
        font-size: 20px;
    }
</style>
<body>
    <div class="left">LEFT</div>
    <div class="right">因为BFC内部的元素和外部的元素绝对不会互相影响，因此， 当BFC外部存在浮动时，它不应该影响BFC内部Box的布局，BFC会通过变窄，而不与浮动有重叠。同样的，当BFC内部有浮动时，为了不影响外部元素的布局，BFC计算高度时会包括浮动的高度。避免margin重叠也是这样的一个道理。
    </div>
    <span>123</span>
</body>
</html>

效果展示：浏览器窗口被窝缩小了，BFC自动变窄！！

五. BFC与clear和float的练习

块格式化上下文对浮动定位（参见 float）与清除浮动（参见 clear）都很重要。浮动定位和清除浮动时只会应用于同一个BFC内的元素。

  • 浮动不会影响其它BFC中元素的布局
  • 清除浮动只能清除同一BFC中在它前面的元素的浮动
  • 外边距折叠（Margin collapsing）也只会发生在属于同一BFC的块级元素之间
posted @ 2020-07-10 18:35  fcslow  阅读(96)  评论(0)    收藏  举报