css概念：BFC

什么是BFC

block元素在文档流中，不具有BFC。除非加个overflow：hidden之类的

BFC就是“块级格式化上下文”的意思，创建了 BFC的元素就是一个独立的盒子，不过只有Block-level Box可以参与创建BFC，它规定了内部的Block-level Box如何布局，并且与这个独立盒子里的布局不受外部影响，当然它也不会影响到外面的元素。

=> 一个高高的盒子，使得内外元素不影响，margin有基准 (暂不考虑绝对元素的BFC)

滚动条

auto 超出有滚动条
scorll 可能一直有(看浏览器)

建立BFC的最好方式

这么看来，建立BFC的最好方式莫过于overflow:hidden了：

.container {
  overflow: hidden;
}

理解BFC：

你可以把BFC想象成一个大箱子，箱子外边的元素将不与箱子内的元素产生作用。

Block Formatting Context提供了一个环境，HTML元素在这个环境中按照一定规则进行布局。一个环境中的元素不会影响到其它环境中的布局。比如浮动元素会形成BFC，浮动元素内部子元素的主要受该浮动元素影响，两个浮动元素之间是互不影响的。也可以说BFC就是一个作用范围。

如何产生BFC：

当一个HTML元素满足下面条件的任何一点，都可以产生Block Formatting Context：

a、float的值不为none
b、overflow的值不为visible
d、position的值不为relative和static
c、display的值为table-cell,table-caption,inline-block中的任何一个

BFC作用

利用BFC可以消除Margin Collapse

理想情况下，我们会认为p 标签之间的margin应该是它们的和(20px),但实际上却是10px.这其实是collapsing margins。

此外，给父元素设置border,padding都足以让margin作为边界. (但清浮动还是需要hidden这堵高墙)

Sibling 1
  Sibling 2
  Sibling 3

.container {
  background-color: red;
  overflow: hidden; /* creates a block formatting context */
}
p {

margin: 10px 0;

background-color: lightgreen;

}
.newBFC {

overflow: hidden;  / creates new block formatting context /

}

由于第二个p元素和第三个p元素属于不同的BFC，因此避免了margin collapse.

利用BFC去容纳浮动元素

.container {
  overflow: hidden; /* creates block formatting context */
  background-color: green;
}
.container div {

float: left;

background-color: lightgreen;

margin: 10px;

}

利用BFC阻止文本换行

往往可能大家都会选择利用margin－left来强行让p的容器有一个左边距，而距离恰好为Floated div的宽度，但现在我们可以利用BFC更好的解决这个问题。

例如：

有时候，确切的说大多数情况(若没有特殊设置)，文本将会环绕浮动元素(如Figure 1),
但有时候这并不是我们期望的，我们想要的是Figure2。

阻止被浮动元素(前面的)覆盖

子元素间。

    
<div class="container"&gt;
  <div class="main"&gt;testA</div>
  <div class="side"&gt;</div>
  <div class="main"&gt;testB</div>
</div></code></pre>

相当于筑了高墙，所有普通流／浮动流等（绝对除外）都会彼此阻隔。

overflow:hidden在紧跟float元素的同级元素上用，它们就不会彼此覆盖。但在float元素上用，是没有效果的，高墙只是想上筑，而float元素本身就在上面，absolute在更上面
overflow:hidden在浮动元素的父级元素上用，可以清算，清除浮动。


 原文链接：https://www.f2er.com/note/421009.html