2.BFC
BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。
哪些元素会生成BFC?
1、根元素
2、float属性不为none
3、position为absolute或fixed
4、display为inline-block, table-cell, table-caption, flex, inline-flex
5、overflow不为visible
BFC的特性
- 内部的Box会在垂直方向，一个接一个地放置。
- Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠每个元素-
- 的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即--- 使存在浮动也是如此。
- BFC的区域不会与float box重叠。
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
- 计算BFC的高度时，浮动元素也参与计算。
BFC的作用：
1.外边距合并
外边距合并指的是，两个在普通文档流中的“相邻”元素外边距相遇的时候发生合并的情况。这个所谓的“相邻”可以是父子关系相邻，兄弟关系相邻，甚至如果一个元素内部没有东西，自身的上下边距相遇时都会发生外边距合并。
合并的结果为： 当两个外边距都是正数时，取两者之中的较大者；当两个外边距都是负数时，取两者之间绝对值较大者；当两个外边距一正一负时，取的是两者的和。
外边距合并的具体情况:
a.父子关系的合并
假如说，父元素和子元素在正常的文档流当中。而且父元素没有边框或者padding，那么父子之间就会发生外边距合并。
（简单的解决方法：
- 1.给父元素加边框；
给父元素加了边框之后，它们的margin就被边界线隔离开来，就不会发生外边距合并。它们就会各归各位，父元素有父元素的外边距，子元素有子元素的外边距 - 2.设置父元素的padding
给父元素设置了padding之后，也能够阻止父子的外边距相融合，所以也可以防止父子元素的外边距合并。）
b.兄弟关系的合并:
如果两个兄弟元素在正常的文档流当中，会产生外边距合并。
（简单的解决方案：只设置一个外边距）
c.自身的合并
一个元素如果里面没有东西，也没有边框和padding，那么它自身的外边距就会融合，也会发生外边距合并
(简单的解决方案：
1.给自身加边框；2.给自身加padding)
阻止相邻元素外边距合并：
另外的方法创建BFC:
1.设置float属性不为none；
2.设置position为absolute或fixed；
3.设置display为inline-block, flex, 或者inline-flex
4.设置：overflow不为visible
但是设置这些属性，要了解它们的副作用并修复
<html>
<head>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div id="header">
<div> <h1>hello world</h1></div>
</div>
<div class="detail">
内容
</div>
<div class="footer1">
<!-- footer1 -->
</div>
<div class="footer2">
footer2
</div>
</body>
</html>
#header{
background-color: red;
margin-bottom:40px ;
/* border:1px solid #333 */
/* padding: 1px; */
overflow: hidden;
/* float: left;
width: 100%; */
/* display: inline-block;
width: 100%; */
/* position: absolute; */
}
#header h1{
margin-top: 50px;
}
.detail{
/* float: left;
clear: both; */
overflow: hidden;
margin-top: 30px;
margin-left: 30px;
background-color: #00f;
}
.footer1{
background-color: #0f0;
margin: 30px;
}
.footer2{
background-color: yellow;
}
14.png
2.包含浮动：计算BFC的高度时，浮动元素也参与计算
</head>
<body>
<header>
<h1>hello world</h1>
<nav>
<ul>
<li><a href="">1</a></li>
<li><a href="">2</a></li>
<li><a href="">3</a></li>
</ul>
</nav>
</header>
</body>
body{
background-color: grey;
margin: 0;
}
header{
background-color: red;
overflow:hidden;
}
ul{
list-style: none;
}
nav{
background-color: pink;
float: left;
}
nav li{
float: left;
padding: 10px;
}
13.png
