自学前端第二十八天 CSS高级之BFC与变量

最新推荐文章于 2022-04-26 21:36:44 发布

AKA俄语人Лев

最新推荐文章于 2022-04-26 21:36:44 发布

阅读量122

点赞数

分类专栏：前端HTML+CSS基础文章标签： css html

本文链接：https://blog.csdn.net/weixin_47592060/article/details/114715994

版权

前端HTML+CSS基础专栏收录该内容

34 篇文章 6 订阅

订阅专栏

CSS Overflow

CSS overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。

overflow属性有以下值：

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

**注意:**overflow 属性只工作于指定高度(或者内容由高度撑开)的块元素上。

注意: 在 OS X Lion ( Mac 系统) 系统上，滚动条默认是隐藏的，使用的时候才会显示 (设置 “overflow:scroll” 也是一样的)。

注意:overflow总结作用: ①写在父盒子中, 隐藏子盒子超出的内容, 比如:搜索栏圆角遮盖,和隐藏多余边框.
在这里插入图片描述

②写在父盒子中,防止浮动后的父容器高度塌陷,(当然你也可以指定高度.)
③写在自身盒子中,成为BFC不会与float box 区域重叠.(自适应)
④新建一个overflow父盒子中单独包裹着子盒子, 防止子和外边出现外边距穿透和合并现象. (鸡肋很少用)

六. FC (格式化上下文,即标准文档流 )

FC的全称是: Formatting Contexts,是 W3C CSS2.1规范中的一个概念。

它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用。

1.BFC(block 得深入了解，但是你用flex布局写则忽略BFC，flex伸缩盒子有自己规则)

(1)BFC(Block Formatting Contexts)概念

①直译为"块级格式化上下文"。

②意译为:Block Formatting Contexts就是页面上的一个“独立隔离”的渲染区域，容器里面的子元素不会在布局上影响到外面的元素，反之也是如此。

(2)那开启BFC一般有什么用呢？

A.比如常见的多栏布局 , 结合块级元素浮动，里面的元素则是在一个相对隔离(被父盒子关住了)的环境里运行。

**官方解释(听不懂的)😗*它决定了元素如何对其内容进行定位以及与其他元素的关系和相互作用当涉及到可视化布局的时候BlochFormatting Context提供了一个环境HTML元素在这个环境中按照一定规则进行布局

通俗翻译下: 形成一个完全独立的大箱子箱子中的子元素与外部元素隔绝开来不管内部元素怎么折腾搞都不会影响到外部, 内部形成一个自己的独立文档流。

(比如,外边距穿透影响到父盒子外面边距了, 父容器高度塌陷影响后面的元素进位了等,因为BFC就是关住了箱子内部子元素东西 , 不让他出来祸害影响别的元素.)

(3)BFC开启后,内部元素所具有的特性(面试题):

1.在BFC中，内部box盒子从顶端开始垂直地一个接一个的排列 .

2.盒子垂直方向的距离由margin决定。属于同一个BFC内的两个相邻盒子的margin还是会发生合并.(内部标准文档流一样)

3.在BFC中，每一个盒子的左外边缘（margin-left）会触碰到父容器的左边框边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘）。 (因此如果没有bor/pad则还是会margin穿透)

4.BFC的整体区域不会与float浮动盒子产生交集，而是紧贴浮动边缘。(特殊的自适应布局)

5.计算BFC的高度时，自然也会检测浮动的盒子高度,不让设置BFC的父盒子的高度去塌陷。

总结它是一个独立的渲染区域，只有块级元素Block-level box参与，它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

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

(4)总结BFC触发条件(不用clearfix,下面5点当前盒子开启BFC ,关住内部的盒子)

根元素(必须在一个html根元素下面,这个自然必须的…)

即HTML文档的根元素是 html 元素，从 <html> 标签开始，到 </html> 标签结束。根元素的作用就是告诉浏览器，在 <html> 和 </html> 之间的内容是HTML类型，浏览器便按HTML进行解析其中的内容。

当前盒子float 属性不为 none的 , 即得为left/rigth 浮动起来的元素 (脱标的,不会出现合并和穿透现象)

即给float浮动起来的子元素, 其父容器高度塌陷,此时要给父容器也设置float浮动,让父容器开启BFC彻底管住熊孩子元素,不让父元素高度塌陷.
(原理:即让父子元素又在同一层级上即都是浮动脱标流,此时检测高度了,之前不在同一文档流上无法检测),但这种是将错就错的写法,因为父元素浮动也会改变其位置,且父元素上一级也会高度塌陷的

扩展:之前的父子块元素就是在同一层标准文档上,这样就可以分

当前盒子position 为 absolute 或 fixed的 (脱标的,不会出现合并和穿透现象)

和上面一样,即给float浮动起来的子元素, 其父容器高度塌陷,此时要给父容器设置absolute绝对定位,让父容器开启BFC彻底管住熊孩子元素,不让父元素高度塌陷.
(原理:即让父子元素又在同一层级上即都是浮动脱标流,此时检测高度了,之前不在同一文档流上无法检测),但这种是将错就错的写法,因为父元素脱标也会改变其位置,且父元素上一级也会高度塌陷的

PS:如果 子也为absolute ,则父absolute形成BFC也没有用 ,子absolute形成的父高度高度塌陷无法解决,除非js

当前盒子 display 为inline-block, table-cell, table-caption , flex， inline-flex (行内块,半脱标,很少用这个开启BFC)

原理:即让父子元素又在同一层级上即都是浮动脱标流,此时检测高度了,之前不在同一文档流上无法检测
flex让父和子都

当前盒子overflow 不为 visible ( 即为overflow:hidden ,auto ,scroll 时)。
(!!!实际这是最常用选择,但缺点超过自己范围就会截掉)
```
原理:父容器设置overflow:hidden ,让父容器开启BFC彻底管住熊孩子元素检测出自己高度,不让父元素高度塌陷.
```

(5)总结:BFC的主要三大用途:

1.清除浮动影响 (即防止父容器高度塌陷(因为内部脱标了),之前用clearfix(clear) /overflow:hidden来解决 )

!记得是把"父容器"变为BFC,一般overflow:hidden,则会去计算当前高度. 这样父子都是BFC, 高度能被检测到:

(全部原理:都是让父子元素又在同一层级上即都是在同一层BFC里,此时检测高度了,之前不在同一文档流上无法检测),

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>BFC DEMO</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .wrap {
      width: 200px;
      padding: 10px;
      background-color: #ccc;
      border: 4px solid #222;
    }

    .children {
      float: left;  /*子全部为float*/
      margin: 10px;
      width: 80px;
      height: 80px;
      background-color: #86cfca;
    }

    .table-cell {
      display: table-cell;
    }

    .float {
      float: left;
    }

    .pos-absolute {
      position: absolute;
      top: 0;
      right: 0;
    }

    .pos-fixed {
      position: fixed;
      top: 100px;
      right: 100px;
    }


    .overflow {
      overflow: hidden;
    }

    .inline-block {
      display: inline-block;
    }
  </style>
</head>

<body> 
  

  <div class="wrap float">        <!-- 1.子float ,父float -->
    <div class="children"></div>
    <div class="children"></div>
    <div class="children"></div>
    <div class="children"></div>
  </div>

  <div class="wrap pos-absolute">   <!-- 2.子float ,父absolute -->
    <div class="children"></div>
    <div class="children"></div>
    <div class="children"></div>
    <div class="children"></div>
  </div>

  <div class="wrap pos-fixed">   <!-- 3.子float ,父fixed -->
    <div class="children"></div>
    <div class="children"></div>
    <div class="children"></div>
    <div class="children"></div>
  </div>

  <div class="wrap overflow">     <!-- 4.子float ,父overflow -->
    <div class="children"></div>
    <div class="children"></div>
    <div class="children"></div>
    <div class="children"></div>
  </div>

  <div class="wrap inline-block">   <!-- 5.子float ,父inline-block -->
    <div class="children"></div>
    <div class="children"></div>
    <div class="children"></div>
    <div class="children"></div>
  </div>

  <div class="wrap table-cell">      <!-- 5. 子float ,父table-cell -->
    <div class="children"></div>
    <div class="children"></div>
    <div class="children"></div>
    <div class="children"></div>
  </div>
</body>

</html>

2.处理外边距穿透&合并. (脱标的都不会出现这两个问题,因为脱标的都是BFC哈哈)

(这里切记 ! 是给当前盒子设置为BFC , 哪怕父盒子变为BFC内部子盒子不变BFC,也还是会穿透合并,因为BFC父盒子内部子盒子没变还是正常排列文档流, 而BFC作用是作用于BFC 与 BFC以外(而不是以内)的盒子产生的,因此要内部蓝色盒子也变为BFC,此时就不会出现穿透和合并了)

①原来: (BFC灰盒子,内部子盒子没变则还是正常文档流,会出现合并和穿透的)

在这里插入图片描述

②现在:(BFC灰盒子, 内部子盒子变为BFC即浮动了 , 浮动之后的盒子则不会出现合并和穿透的)

在这里插入图片描述

3.实现两栏|三栏自适应布局 (重点理解:BFC的区域不会与浮动盒子产生交集，而是紧贴浮动边缘,下面有案例)

在这里插入图片描述

(如果蓝盒子是用float开启的BFC,则会出现挤不下一行的情况,因为浮动的盒子如果没有设置宽度,则根据文本内容自适应宽度,因此文本p独占一行了.除非设置固定宽度,但设置固定宽度就不能自适应了.)

在这里插入图片描述

4.BFC综合案例: BFC父容器高度不塌陷 + BFC垂直外边距不合并 + 三栏自适应布局(BFC的区域不会与浮动盒子产生交集)

在这里插入图片描述

<!DOCTYPE html>
<html lang="zh-cn">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>BFC DEMO</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul {
      list-style: none;
    }

    .slide-bar {   /* 左浮动蓝盒子 左栏*/
      float: left;
      width: 200px;
      height: 600px;
      background-color: skyblue;
    }

    .slide-bar-right {   /* 右浮动蓝盒子 右栏*/
      float: right;
      width: 200px;
      height: 600px;
      background-color: skyblue;
    }

    .content {    /* 中间没有宽度的content,开启BFC的区域不会与浮动盒子产生交集,中间栏 */
      overflow: hidden;
      height: 660px;
      background-color: orange;
    }

   

    .content .nav {    /* 灰色条 */
      width: 80%;
      height: 40px;
      margin: 20px auto;
      background-color: #ccc;
      border-radius: 5px;
    }

    .content .con-list {   /* 这里开启BFC,是为了不让父盒子高度塌陷 */
      overflow: hidden;
    }

    .content .con-list li {   /* 这里开启两个BFC, 不让外边距合并,
                              垂直margin也是40,其实这里overflow可以不用的 */
      overflow: hidden;  /* BFC */
      float: left;  /* BFC */
      width: 100px;
      height: 150px;
      margin: 20px;
      background-color: yellowgreen;
    }

    .footer {    /*  页脚 */
      width: 80%;
      height: 80px;
      background-color: #cc3faa;
    }
  </style>
</head>

<body>
  <div class="slide-bar"></div>  <!-- 左 -->
  <div class="slide-bar-right"></div>  <!-- 右 -->
  <div class="content">   <!-- 中 -->
    <div class="nav"></div>
    <ul class="con-list">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
    <div class="footer">
    </div>
  </div>

</body>

</html>

2.IFC(inline规则了解即可)

IFC(Inline Formatting Contexts) 直译为"内联格式化上下文"， IFC的line box (线框) 高度由其包含行内元素中最高的实际高度计算而来 (不受到竖直方向的padding/margin影响,即行内的垂直的mar和pad失效的)。

IFC中的line box一般左右都贴紧整个IFC，但是会因为float元素而扰乱。float元素会位于IFC与与line box之间,便得line box宽度缩短。同个IFC下的多个line box高度会不同。

3.FFC(flex规则了解即可)

FFC (Flex Formatting Contexts) 直译为"自适应格式化上下文"，display 值为 flex 或者 inline-flex 的元素将会生成自适应容器(flex container) ，Flex Box由伸缩容器和伸缩项目组成。

通过设置元素的display 属性为 flex 或 inline-flex 可以得到一个伸缩容器。设置为flex的容器被渲染为一个块级元素，而设置为inline-flex的容器则渲染为一个行内元素。伸缩容器中的每一个子元素都是一个伸缩项目。伸缩项目可以是任意数量的。伸缩容器外和伸缩项目内的一切元素都不受影响。

简单地说, Flexbox定义了伸缩容器内伸缩项目该如何布局。

4.GFC (grid网格布局了解类似BFC, H5会细讲)

后期讲响应式自适应和移动端布局的时候进行补充

GFC(GridLayout Formatting Contexts)直译为"网格布局格式化上下文"，**当为一个元素设置display值为grid的时候，此元素将会获得一个独立的渲染区域，**我们可以通过在网格容器 (grid container) 上定义网格定义行(griddefinition rows) 和网格定义列 (grid definition columns) 属性各在网格项目 (grid item) 上定义网格行(gridrow) 和网格列 (grid columns)为每一个网格项目(grid item)定义位置和空间。

那么GFC有什么用呢,和table又有什么区别呢?首先同样是一个二维的表格,但GridLayout会有更加丰富的属性来控制行列,控制对齐以及更为精细的渲染语义和控制。

博客园大佬的 ----BFC 定义

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

在解释什么是BFC之前，我们需要先知道Box、Formatting Context的概念。

Box：css布局的基本单位

Box 是 CSS 布局的对象和基本单位，直观点来说，就是一个页面是由很多个 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 Context

Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)。

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

BFC的布局规则

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

如何创建BFC

1、float的值不是none。
2、position的值不是static或者relative。
3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex
4、overflow的值不是visible

BFC的作用

1.利用BFC避免margin重叠(套一个div块元素盒子即可,但很鸡肋,一般不这么用)。

一起来看一个例子：

<!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;
    }
</style>
<body>
    <p>看看我的 margin是多少</p>
    <p>看看我的 margin是多少</p>
</body>
</html>
123456789101112131415161718192021222324252627

页面生成的效果就是这样的：
在这里插入图片描述

根据第二条，属于同一个BFC的两个相邻的Box会发生margin重叠，所以我们可以设置，两个不同的BFC，也就是我们可以让把第二个p用div包起来并设置overflow:hidden，然后激活它使其成为一个BFC,第二个p就不会和第一个p外边距合并了

<!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>看看我的 margin是多少</p>
    </div>
</body>
</html>
1234567891011121314151617181920212223242526272829303132

在这里插入图片描述

2.自适应两栏布局

根据：

每个盒子的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。

<!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 {
        height: 300px;
        background: rgb(170, 54, 236);
        text-align: center;
        line-height: 300px;
        font-size: 40px;
    }
</style>
<body>
    <div class="left">LEFT</div>
    <div class="right">RIGHT</div>
</body>
</html>
1234567891011121314151617181920212223242526272829303132333435363738394041

页面：
在这里插入图片描述

又因为：

原理:BFC的形成的区域不会与 float box重叠,所以我们让right单独成为一个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; //形成BFC
        height: 300px;
        background: rgb(170, 54, 236);
        text-align: center;
        line-height: 300px;
        font-size: 40px;
    }
</style>
<body>
    <div class="left">LEFT</div>
    <div class="right">RIGHT</div>
</body>
</html>
123456789101112131415161718192021222324252627282930313233343536373839404142

页面：
在这里插入图片描述

因为bfc区域不会和float区域重合,因此right盒子会自动的适应宽度了，这时候就形成了一个两栏自适应的布局。

(PS:不要和这个文档流会进位浮动流,因此在浮动流后加div即可不让自身高度塌陷)

在这里插入图片描述

3.清除浮动。(造成父容器高度塌陷)

当我们不给父节点设置高度，子节点设置浮动的时候，会发生高度塌陷，这个时候我们就要清楚浮动。

比如这样：

<!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>清除浮动</title>
</head>
<style>
    .par {
        border: 5px solid rgb(91, 243, 30);
        width: 300px;
    }
    
    .child {
        border: 5px solid rgb(233, 250, 84);
        width:100px;
        height: 100px;
        float: left;
    }
</style>
<body>
    <div class="par">
        <div class="child"></div>
        <div class="child"></div>
    </div>
</body>
</html>
12345678910111213141516171819202122232425262728

页面：
在这里插入图片描述

这个时候我们根据最后一条：

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

给父节点激活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>清除浮动</title>
</head>
<style>
    .par {
        border: 5px solid rgb(91, 243, 30);
        width: 300px;
        overflow: hidden;
    }
    
    .child {
        border: 5px solid rgb(233, 250, 84);
        width:100px;
        height: 100px;
        float: left;
    }
</style>
<body>
    <div class="par">
        <div class="child"></div>
        <div class="child"></div>
    </div>
</body>
</html>
1234567891011121314151617181920212223242526272829

页面：
在这里插入图片描述

三个BFC(Block formatting context)应用的大总结

以上例子都体现了：

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

因为BFC内部的元素和外部的元素绝对不会互相影响，因此，当BFC外部存在浮动时，它不应该影响BFC内部Box的布局，BFC会通过变窄，而不与浮动有重叠。同样的，当BFC内部有浮动时，为了不影响外部元素的布局，BFC计算高度时会包括浮动的高度。避免margin重叠也是这样的一个道理。

知乎大佬的

一.前言

BFC在css的学习中是重要的但不易理解的概念，BFC也牵扯了很多其他问题，如浮动、定位、盒模型等，因此弄懂BFC是很有必要的。本文对BFC进行总结，希望对你有所帮助。

二.BFC是什么？

1.先看看MDN的定义FC：(不好理解)

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

2.官方文档的说法很难理解，查阅多方资料后，得到以下的结论：

BFC(block formatting context)块级格式化上下文，它是页面中的一块独立隔离的渲染区域，并且有一套属于自己的渲染规则，它决定了元素如何对齐内容进行布局，以及与其他元素的关系和相互作用。当涉及到可视化布局的时候，BFC提供了一个环境，HTML元素在这个环境中按照一定规则进行布局

3.简短的总结：BFC是一个独立的布局环境，BFC内部的子元素布局与外部互不影响

三.BFC的布局规则

内部的Box会在垂直方向一个接着一个地放置。
Box垂直方向上的距离由margin决定。属于同一个BFC的两个相邻的Box的margin会发生重叠。
每个盒子的左外边框紧挨着包含块的左边框，即使浮动元素也是如此。
BFC的区域不会与float box重叠。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦然。
计算BFC的高度时，浮动子元素也参与计算。

四.如何触发BFC(实际就只用overflow:hidden开启)？

这里只记录常用方法，想要了解全部触发BFC的方法请点击此链接

五.BFC可以解决哪些问题？

①解决浮动元素令父元素高度坍塌的问题(BFC可以清除浮动,包含并计算浮动盒子)

方法：给父元素overflow:hidden开启BFC

原理：计算BFC的高度时，浮动子元素也参与计算
(因为触发了新的BFC区域，和其他的BFC隔离开，各自对自己包裹的对象进行定位，也能包含浮动元素 )

演示：

②标准流下的非浮动元素被浮动元素覆盖 , 而开启BFC的区域不会和float盒子重叠

方法：给当前(设置了宽度的)非浮动元素overflow:hidden开启BFC即可

原理：BFC的区域不会与float box重叠

演示：

③两栏/三栏自适应的布局

方法：给固定栏设置固定宽度，给不固定栏开启BFC。

原理：BFC的区域不会与float box重叠

演示：

外边距垂直方向重合的问题

方法：给上box或者下box任意一个包裹新的box并开启BFC

原理：属于同一个BFC的两个相邻的Box的margin会发生重叠。

演示：

结语

以上就是本文关于BFC的全部内容，如果有不正确的地方，欢迎大家指正。码字不易，且赞且珍惜。

参考

BFC官方文档

10 分钟理解 BFC 原理

林东洲

一、常见定位方案在讲 BFC 之前，我们先来了解一下常见的定位方案，定位方案是控制元素的布局，有三种常见方案:
①普通流 (normal flow)
在普通流中，元素按照其在 HTML 中的先后位置至上而下布局，在这个过程中，行内元素水平排列，直到当行被占满然后换行，块级元素则会被渲染为完整的一个新行，除非另外指定，否则所有元素默认都是普通流定位，也可以说，普通流中元素的位置由该元素在 HTML 文档中的位置决定。

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

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

二、BFC 概念Formatting context(格式化上下文) 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块独立的渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。
那么 BFC 是什么呢？
BFC 即 Block Formatting Contexts (块级格式化上下文)，它属于上述定位方案的普通流。
**具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。**通俗一点来讲，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。

三、触发 BFC只要元素满足下面任一条件即可触发 BFC 特性：
body 根元素浮动元素：
float 除 none 以外的值绝对定位元素：
position (absolute、fixed)
display 为 inline-block、table-cells、flex
overflow 除了 visible 以外的值 (hidden、auto、scroll)

四、BFC 特性及应用: 1. 同一个 BFC 下外边距会发生折叠

<head>
div{     
    width: 100px;    
    height: 100px;     
    background: lightblue;    
    margin: 100px; } 
</head>
<body>     
<div></div>     
<div></div> 
</body>

从效果上看，因为两个 div 元素都处于同一个 BFC 容器下 (这里指 body 元素) 所以第一个 div 的下边距和第二个 div 的上边距发生了重叠，所以两个盒子之间距离只有 100px，而不是 200px。

首先这不是 CSS 的 bug，我们可以理解为一种规范，如果想要避免外边距的重叠，可以将其放在不同的 BFC 容器中/或者单独将一个盒子包起来设置overflow开启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>

这时候，两个盒子边距就变成了 200px

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

**3.BFC可以阻止元素被浮动元素覆盖和两列自适应布局 **
先来看一个文字环绕效果：
`

AKA俄语人Лев

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
自学前端第二十八天 CSS高级之BFC与变量

CSS OverflowCSS overflow 属性可以控制内容溢出元素框时在对应的元素区间内添加滚动条。overflow属性有以下值：值描述visible默认值。内容不会被修剪，会呈现在元素框之外。hidden内容会被修剪，并且其余内容是不可见的。scroll内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。auto如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。inherit规定应该从父元素继承 overflow 属性的值。
复制链接

扫一扫