BFC学习

BFC(Block formatting context)

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

触发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>

原始效果：

根据BFC布局规则第3条：

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

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

　　根据BFC布局规则第4条：

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

　　我们可以通过通过触发main生成BFC，来实现自适应两栏布局。

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

效果：

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布局规则第六条：

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

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

　　代码：

.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区域之间的布局不产生影响.

BFC学习

BFC(Block formatting context)

触发BFC的条件：

BFC布局规则：

BFC可以用来做什么？

1. 实现自适应两栏布局

2.清除内部浮动

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

4.利用BFC解决包含塌陷

总结

猫子

引用和评论

在 Braft Editor 中实现自定义 Emoji 功能

CSS Houdini：一种足以颠覆想象的 API

那些年我用过的SAP IDE

CSS---引用外部字体（一）---引入

SAP UI5 初学者教程之十三 - 如何添加自定义 CSS 类试读版

SAP UI5 初学者教程之十二 - 使用 CSS 类对 UI 进行进一步美化试读版

SAP UI5 应用开发教程之三十六 - 使用 Chrome 开发者工具 Elements 标签动态修改 CSS 类试读版