The basic_knowledge from lyc2014

学习BFC

lyc2014 2019.04.09

概念

BFC英文全称Block Formatting Context, 直译块格式上下文。它是Web页面的可视化CSS渲染的一部分，是决定块级元素(block-box)布局的一块区域，也是浮动元素和其它元素相互影响范围的一个区域。

块格式上下文BFC的创建方法（只举例常用方法，了解更多请看MDN文档）：

浮动元素（元素的float是none）
绝对定位元素（元素的position为absolute或fixed）
display值为inline-block、inline-flex、flex、table-cell或者table-caption
overflow的值不为visible的元素

块格式上下文BFC的特性（只举例常见用法）

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，外面的也不会影响里面的。
计算BFC的高度时，考虑BFC所包含的所有元素，连浮动元素也参与计算
BFC的区域不会与float box重叠

应用场景

1、高度坍塌例子

<div class="outer">
    <div class="float">I am a float box.</div>
    I am text
  </div>

.outer {
    border: 5px dotted rgba(9, 87, 121, 0.4);
    border-radius: 5px;
    width: 450px;
    padding: 0px;
    margin-bottom: 40px;
  }
.float {
    padding: 10px;
    border: 5px solid rgba(123, 200, 234, 0.4);
    border-radius: 5px;
    background-color: rgba(78, 136, 233, 0.4);
    color: #fff;
    float: left;  
    width: 200px;
    margin: 0 20px 0 0;
  }

可以看到当出现浮动元素的时候，父级元素可能会出现高度坍塌的现象，而前面提到的bfc的特性二（计算BFC的高度时，考虑BFC所包含的所有元素，连浮动元素也参与计算）就可以解决这个问题。

这个也是我们处理高度坍塌比较常用的方法，通过浮动、绝对定位、display和overflow都可以给outer创建BFC解决这个问题，所以还可以针对具体需求选择一个最合适的创建方法。

接下来我再举一个例子，来进一步了解“计算BFC的高度时，包含的所有元素，连浮动元素也参与计算”

<div class="outermost">
    <div class="outer">
      <div class="float">I am a float box.</div>
      I am text
    </div>
</div>

.outermost{
    display: inline-block;
    border: 5px solid blue;
 }

outer发生了高度坍塌，但是外层display: inline-block的outermost却没有发生坍塌，这说明了BFC是计算某一单层节点的布局规则。（设置了bfc那一层）。

2、外边距崩塌

<div class="uncle">uncle</div>
  <div class="parent">
      <div class="child-1">child-1</div>
      <div class="child-2">child-2</div>
  </div>
  <div class="uncle">uncle</div>

*{
    color: white;
    font-weight: bold;
    font-size: 20px;
    text-align: center;
  }
  .parent{
    background: grey;
  }
  .child-1{
    margin: 30px 0px;
    background: blue;
    height: 100px;
  }
  .child-2{
    margin: 30px 0px;
    background: red;
    height: 100px;
  }
  .uncle{
    height: 100px;
    background: green;
  }

child-1的上外边距和child-2的下外边距透过了父级撑开了 parent和uncle的距离，但是我们其实是想child在内部撑开与parent的border的距离注意：这种场景的出现, parent上下不能设置border。这时候使用BFC可以解决（BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，外面的也不会影响里面的。）

.parent{
   background: grey;
    overflow: auto;
 }

3、实现双栏布局

* { box-sizing: border-box; }

body {
  margin: 40px;
  background-color: #fff;
  color: #444;
}

.outer {
  border: 5px dotted rgb(214,129,137);
  border-radius: 5px;
  width: 450px;
  padding: 10px;
  margin-bottom: 40px;
}

.float {
  padding: 10px;
  border: 5px solid rgba(214,129,137,.4);
  border-radius: 5px;
  background-color: rgba(233,78,119,.4);
  color: #fff;
  float: left;  
  width: 200px;
  margin: 0 20px 0 0;
}

<div class="outer">
     <div class="float">I am a floated element.</div>
     <div class="right">
        I am text inside a div nested inside the outer box. If there is enough text then the text will wrap 
        around the floated element. The border on the outer will then wrap around the text.
     </div>
 </div>

根据BFC的特性（BFC的区域不会与float box重叠），给right设置成bfc，则right不会与float发生重叠。

.right{
    overflow: auto;
}

这就是典型的双栏布局，左边固定宽度，右边自适应宽度，使用BFC也可以实现。

lyc2014 / basic_knowledge Goto Github PK

basic_knowledge's People

Contributors

basic_knowledge's Issues

学习BFC

学习BFC

概念

块格式上下文BFC的创建方法（只举例常用方法，了解更多请看MDN文档）：

块格式上下文BFC的特性（只举例常见用法）

应用场景

1、高度坍塌例子

2、外边距崩塌

3、实现双栏布局

Recommend Projects

React

Vue.js

Typescript

TensorFlow

Django

Laravel

D3

Recommend Topics

javascript

web

server

Machine learning

Visualization

Game

Recommend Org

Facebook

Microsoft

Google

Alibaba

D3

Tencent

lyc2014 / basic_knowledge Goto Github PK

basic_knowledge's People

Contributors

basic_knowledge's Issues

学习BFC

概念

块格式上下文BFC的创建方法（只举例常用方法，了解更多请看MDN文档）：

块格式上下文BFC的特性（只举例常见用法）

应用场景

1、高度坍塌例子

2、外边距崩塌

3、 实现双栏布局

Recommend Projects

Recommend Topics

Recommend Org

3、实现双栏布局