BFC学习

时间 2021-05-09

标签 javascript html java ide 布局 flex spa code orm htm 栏目 JavaScript 繁體版

原文原文链接

BFC(Block formatting context)

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

触发BFC的条件：

body根元素
设置浮动，不包括none
设置定位，absoulte或者fixed
行内块显示模式，inline-block
设置overflow，即hidden，auto，scroll
表格单元格，table-cell
弹性布局，flex

BFC布局规则：

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

BFC能够用来作什么？

1. 实现自适应两栏布局

<html>
   <head>
       <meta charset="utf-8">
       <title></title>
   </head>
   <style>
       body {
           width: 300px;
           position: relative;
       }
    
       .aside {
           width: 100px;
           height: 150px;
           float: left;
           background: blue;
       }
    
       .main {
           height: 200px;
           background: green;
       }
   </style>
   <body>
       <div class="aside"></div>
       <div class="main"></div>
   </body>
</html>

原始效果：
html

根据BFC布局规则第3条：java

每一个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，不然相反)。即便存在浮动也是如此。

　　所以，虽然存在浮动的元素aslide，但main的左边依然会与包含块的左边相接触。ide

　　根据BFC布局规则第4条：布局

BFC的区域不会与 float box重叠。

　　咱们能够经过经过触发main生成BFC，来实现自适应两栏布局。flex

.main {
            overflow:hidden;//使main生成BFC
            height: 200px;
            background: green;
        }

效果：
spa

2.清除内部浮动

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
<style>
    .par {
        border: 5px solid darkgray;
        width: 300px;
    }
 
    .child {
        border: 5px solid pink;
        width:100px;
        height: 100px;
        float: left;
    }
</style>
<body>
    <div class="par">
        <div class="child"></div>
        <div class="child"></div>
    </div>
</body>
</html>

原始效果：

根据BFC布局规则第六条：code

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

　　为达到清除内部浮动,能够触发par生成BFC，那么par在计算高度时，par内部的浮动元素child也会参与计算。orm

　　代码：htm

.par {
      border: 5px solid darkgray;
      width: 300px;
      overflow:hidden;
  }

效果：

3.解决外边距的塌陷问题（垂直塌陷）

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
<style>
    p {
        color: #f55;
        background: lightcyan;
        width: 200px;
        line-height: 100px;
        text-align:center;
        margin: 100px;
    }
</style>
<body>
    <p>1111</p>
    <p>2222</p>
</body>
</html>

原始效果（两个部分的margin重叠了）：

根据BFC布局规则第二条：

Box垂直方向的距离由margin决定。属于同一个 BFC的两个相邻 Box的margin会发生重叠

　　咱们能够在其中一个p外面包裹一层容器，并触发该容器生成一个BFC。那么两个P便不属于同一个BFC，就不会发生margin重叠了。

<style>
    .wrap {
        overflow: hidden;
    }
    p {
        color: #f55;
        background: lightcyan;
        width: 200px;
        line-height: 100px;
        text-align:center;
        margin: 100px;
    }
</style>
<body>
    <p>1111</p>
    <div class="wrap">
        <p>2222</p>
    </div>
</body>

4.利用BFC解决包含塌陷

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
<style>
    .father {
       width:300px;
       height:300px;
       background-color: red;
    }
    .son {
        width:100px;
        height:100px;
        background-color: darkgray;
        margin-top:50px;
    }
</style>
<body>
   
    <div class="father">
        <div class='son'></div>
    </div>
</body>
</html>

本来，正确的显示方式，应该是粉色盒子与红色盒子的顶部距离为50px，可是因为margin的塌陷问题，致使盒子内部的布局影响到了外部。这个时候，就能够触发BFC，将父盒子变成一个独立的区域，这样在BFC区域内部的任何操做，都不会影响到外部。
代码：

.father {
       width:300px;
       height:300px;
       background-color: red;
       overflow:hidden;
    }

总结

一个BFC区域只包含其子元素，不包括其子元素的子元素.
并非全部的元素都能成为一块BFC区域，只有当这个元素知足条件的时候才会成为一块BFC区域
不一样的BFC区域之间是相互独立的，互不影响的。利用这个特性咱们可让不一样BFC区域之间的布局不产生影响.