1.CSS中哪些情况下会生成BFC?BFC有哪些特征?
谈起BFC，对于基础不怎么好的我,首先映入脑海的是块级格式化上下文，然后就只能零零散散记起一些.在这里做一个系统的参考便于自己加深影响，受到一些大佬的文章指导链接.中文常译为块级格式化上下文。是 W3C CSS 2.1 规范中的一个概念，它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用。 在进行盒子元素布局的时候，BFC提供了一个环境，在这个环境中按照一定规则进行布局不会影响到其它环境中的布局。比如浮动元素会形成BFC，浮动元素内部子元素的主要受该浮动元素影响，两个浮动元素之间是互不影响的。 也就是说，如果一个元素符合了成为BFC的条件，该元素内部元素的布局和定位就和外部元素互不影响(除非内部的盒子建立了新的 BFC)，是一个隔离了的独立容器。（在 CSS3 中，BFC 叫做 Flow Root）
在了解BFC之前，首先得知道Box和Formatting Contex概念
1.Box模型
所谓的盒模型不外乎，margin，border,padding,content,(这里就不多做解释了)
2.Formatting Contex
格式化上下文指的是初始化元素定义的环境。包含两个要点，一个是元素定义的环境，一个是初始化。
Formatting context 是 W3C CSS2.1 规范中的一个概念。它是页面中的一块渲染区域，并且有一套渲染规则，它决定了其子元素将如何定位，以及和其他元素的关系和相互作用..。最常见的 Formatting context 有 Block fomatting context (简称BFC)和 Inline formatting context (简称IFC)。
CSS2.1 中只有 BFC 和 IFC, CSS3 中还增加了 GFC 和 FFC。
现在来谈谈BFC的触发条件吧
float值不为none
overflow不为visable
display的值为inline-block、table-cell、table-caption
position为absolute或fixed
只要满足其中一条就可以触发
1.内部的Box会在垂直方向，一个接一个地放置。
2.Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
3.每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
4.BFC的区域不会与float box重叠。
5.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
6.计算BFC的高度时，浮动元素也参与计算
BFC的作用
1.不和浮动元素重叠
给right清除浮动后（overflow:hidden）
2.自适应两栏布局
<style>
* {
margin: 0;
padding: 0;
}
.container {
}
.float {
width: 200px;
height: 100px;
float: left;
background: red;
opacity: 0.3;
}
.main {
background: green;
height: 100px;
overflow: hidden;
}
</style>
<div class="container">
<div class="float">
浮动元素
</div>
<div class="main">
自适应
</div>
</div>
原文：https://www.cnblogs.com/Tonyhao/p/11185080.html