BFC
BFC触发
1.根元素
2.float
3.overflow：auto,scroll,hidden（常用）
4.display：table-cell，table-caption，inline-block,flex,inline-flex;
5.position:absolut,fixed
BFC布局规则
1.背部的box会在垂直方向上一个接一个放置
2.。。。。
运用：
1.当浮动元素导致它的弟弟元素受影响时，给弟弟元素添加BFC（overflow：hidden）
2.当浮动导致元素的父级高度为0时，可以给父级加BFC（overflow：hidden）
3.当元素的设置位置到父级的范围时，给父级加BFC（overflow：scroll）
4.解决上下div的margin值相加：在两个div之间设置一个空的div<div id='k'></div>,css设置：#k{overflow:hidden}
5.当浮动元素设置margin值导致其父级的margin值改变而本身不改变时，给父级元素添加BFC（overflow：scroll）
举例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
/*1*/
.box1,.box2,.box3{width: 200px;height: 200px;background: red}
.box2{width: 500px;height: 250px;background: yellow;overflow: hidden}
.box1{float: left;}
/*4*/
.box3{margin-bottom: 50px}
.box4{margin-top: 50px;background: red;width: 200px;height: 200px;}
#k{overflow: hidden}
/*2*/
ul{border: 1px solid black;overflow: hidden}
ul li{float: left}
/*5*/
.pa{
width: 200px;
height: 500px;
background: green;
overflow: hidden;
/*如果不设置此BFC，当pa_1设置上面外边距时，父级带着子元素向下移动子元素的margin-top值*/
}
.pa_1{
width: 100px;
height: 50px;
background: red;
margin-top: 100px;
}
.pa_2{
width: 100px;
height: 50px;
background: orange;
}
/*3*/
.pa2{
width: 500px;
height: 100px;
background: green;
overflow: scroll;
/*overflow-x: scroll;*/
/*overflow-y: scroll;*/
}
.pa2_1{
width: 100px;
height: 50px;
background: red;
}
.pa2_2{
width: 100px;
height: 50px;
background: orange;
margin-left: 800px;
}
</style>
</head>
<body>
<!--1-->
<div class="box1">1</div>
<div class="box2">2</div>
<!--4-->
<div class="box3">3</div>
<div id="k"></div>
<div class="box4">4</div>
<!--2-->
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<!--5-->
<div class="pa">
<div class="pa_1"></div>
<div class="pa_2"></div>
</div>
<!--3-->
<div class="pa2">
<div class="pa2_1"></div>
<div class="pa2_2"></div>
</div>
</body>
</html>
###BFC
**BFC** (Block Formatting Context) 块级格式化上下文
是一个环境，一个隔离的独立容器，与布局相关，写了 html 标签他就已经是一个 BFC 环境了。给其余的 box 设置 BFC 环境就是为了让它成为一个独立的空间。表现原则为：内部子元素再怎么翻江倒海都不会影响外部的元素，反之如此。避免margin穿透啊、清除浮动什么的。
box 是 CSS 布局的对象和基本单位，直观来说就是一个页面由很多个 box 组成，元素的类型和 display 属性决定了这个 box 的类型，不同类型的 box 会参与不同的 formatting context
* display 为 block、list-item、table 的元素会生成 block-level box 并且参与BFC；
* display 为 inline、inline-block、inline-table 的元素会生成 inline-level-box 并且参与IFC；
**formatting context** 是 W3C CSS2.1 规范里的一个概念。它是页面中的一块渲染区域，并且有一套规则，它规定了其子元素将如何定位，以及和其他元素的关系和相互作用。
*CSS2.1 中只有 BFC 和 IFC, CSS3 中还增加了 GFC 和 FFC。*
**BFC布局规则：**
1. 内部的 box 会在垂直方向一个接一个放置
2. box 垂直方向的距离由 margin 决定，属于同一个 BFC 的2个相邻 box 的 margin 会重叠
3. 每个元素的 margin box 的左边与包含块 border box 的左边相接触（对于从左往右的格式化，否则相反）即使浮动也是如此
4. BFC 的区域不会与 float box 重叠
5. BFC 就是页面上的一个隔离的独立容器，容器里的子元素与外界无关不会相互影响
6. 计算 BFC 高度时，浮动元素也参与计算
何时会触发bfc呢：常见的如下：
1. 根元素
2. float;
3. overflow: auto、scroll、hidden;
4. display: table-cell、table-caption、inline-block、flex、inline-flex;
5. position:absolut、fixed;
实验1:因浮动影响发生重叠，自适应两栏布局
```
body{
width: 300px;
position: relative;
}
.aside {
width: 100px;
height: 150px;
background: #f66;
float: left;
}
.main {
height: 200px;
background: #fcc;
}
<div class="aside"></div>
<div class="main"></div>
```
此时会发现，main 的左边覆盖在了 aside 下面。
根据BFC布局规则第三条说：每个元素的 margin box的左边与包含块border box的左边相接触，即使浮动也是如此。<br/>而第四条规定 BFC 区域不会与 float box 重叠，所以，我们给 main 添加 overflow:hidden; 触发BFC，也可以实现自适应两栏布局
实验2:
经典的上边距重叠的问题
```
.main{
background-color: darkgrey;
width: 700px;
}
.first{
margin-top: 100px;
width: 50px;
height: 50px;
background-color:#000000;
}
.second{
width: 50px;
height: 50px;
background-color: blue;
}
<div class="main">
<div class="first"></div>
<div class="second"></div>
</div>
```
此时会发现，因为子元素的margin-top导致整块div都移动，给父级加上 overflow:hidden; 触发 BFC
实验3:影响别的元素
```
.main{
background-color:darkgrey;
width: 700px;
}
.first{
width: 50px;
height: 50px;
background-color: #000000;
}
.second{
width: 50px;
height: 50px;
background-color: blue;
margin-left: 800px;
}
```
此时，会发现，second超出了main，影响到了其它的元素，给main触发BFC，这样就不会影响到其它元素了
实验4:因浮动导致文字环绕
```
.box {
width:210px;
border: 1px solid #000;
float: left;
}
.img {
width: 100px;
height: 100px;
background: #696;
float: left;
}
.info {
background: #ccc;
color: #fff;
}
<div class="box">
<div class="img">image<div>
<p class="info">hello world<p>
</div>
```
此时，当文字变多时，会出现文字环绕，所以，我们给p标签触发BFC
实验5:因子元素的浮动导致父元素的高度塌陷
```
.par {
border: 5px solid #fcc;
width: 300px;
}
.child {
border: 5px solid #f66;
width:100px;
height: 100px;
float: left;
}
<div class="par">
<div class="child"></div>
<div class="child"></div>
</div>
```
此时，我们会发现浮动后,2个子元素并没有撑开父级，导致了父级的高度塌陷。<br>而根据BFC第六条规则：计算BFC高度时，浮动元素也要参与计算，所以为了达到清除内部浮动我们给父级 .par 触发BFC
实验6:margin重叠
```
p {
color: #f55;
background: #fcc;
width: 200px;
line-height: 100px;
text-align:center;
margin: 100px;
}
<p>Haha</p>
<p>Hehe</p>
```
此时，我们会发现p与p之间的 margin 发生了重叠.<br>根据BFC第一条规则：2个相邻的普通流重的块框在垂直位置的空白边会发生折叠现象，第二条规则：box垂直方向的距离由 margin 决定，<br/>属于同一个BFC的2个相邻box的 margin 会发生重叠，<br>我们可以插入一个空标签，给这个空标签触发BFC，或者可以在第二个p外面包裹一个div触发BFC。这样，就使2个p不处于同一个BFC。
