目录
- css场景思考
- BFC解决垂直方向边距重叠
- BFC清除浮动
- 小知识：css盒模型有几种计算方式？
正文
BFC是英文Block Formatting Context的简称，翻译过来就是块格式化上下文。用来包含创建它的元素内部的所有内容。简单的说就是可以解决一些想要而不得的场景。比如如下问题：
1. 思考？
请看如下代码父元素#content的高度是多少呢？
a.50px b.80px
<section id="content">
<style>
#content{
background-color: bisque;
}
article{
margin-top:30px;
height: 50px;
background-color: aqua;
}
</style>
<article></article>
</div>
</section>答案：50px
通过盒模型，我们发现父元素并没有包含子元素的margin值，那么怎么让父元素包裹住子元素的所有高度呢？这时候就该BFC出场了！我们只需要给父元素添加overflow:hidden;就可以使父元素包含创建它的元素内部的所有元素，这就是BFC的用处，是不是很简单呢？
除此以外它还可以解决如下常见问题：
- 同一容器下垂直方向边距重叠
- 子元素浮动导致的父元素高度为0
2.BFC解决垂直方向边距重叠
<section id="margin">
<style>
#margin{
background-color: bisque;
overflow: hidden;
}
#margin p{
margin:5px auto 25px;//上边距5 左右auto 下边距25px
height: 50px;
background-color: aqua;
}
</style>
<p>1</p>
<p>2</p>
<p>3</p>
</section>
上图示意代码我们发现p标签2上下边距采用了最大间距25px，而不是5+25=30px。这就是css边距重叠。当我们想让元素边距不重叠，就可以给想要的元素添加父元素BFC。比如在完整代码实例中，我们给p标签2加了BFC，就实现了p标签2上下边距30px。
3.BFC清除浮动
<section id="float">
<style>
#float{
background-color: bisque;
}
#float article{
float: left;
background-color: aqua;
}
</style>
<article>我是浮动元素</article>
</section>
上面代码我们发现，如果给一个子元素浮动，那么父元素是不会产生高度的。通过BFC，我门可以使文档流回归正常，达到清除浮动的目的。
完整示例：
完整代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BFC-浏览器格式化上下文【overflow】</title>
<style>
html * {
padding: 0;
margin: 0;
}
section {
margin-bottom: 30px;
}
</style>
</head>
<body>
<p>1.使用BFC包含所有内容</p>
<section id="content">
<style>
#content {
background-color: bisque;
overflow: hidden;
}
#content article {
margin-top: 30px;
height: 50px;
background-color: aqua;
}
</style>
<article></article>
</div>
</section>
<p>2.BFC解决垂直方向边距重叠</p>
<section id="margin">
<style>
#margin {
background-color: bisque;
overflow: hidden;
}
#margin p {
margin: 5px auto 25px;
height: 50px;
background-color: aqua;
}
</style>
<p>1</p>
<div style="overflow: hidden;">
<p>2</p>
</div>
<p>3</p>
</section>
<p>3.BFC浮动元素也会包含在内</p>
<section id="float">
<style>
#float {
background-color: bisque;
overflow: auto;
}
#float article {
float: left;
background-color: aqua;
}
</style>
<article>我是浮动元素</article>
</section>
</body>
</html>4.小知识css盒模型
你知道css盒模型有几种计算方式吗？
答案：两种
分别是标准盒模型【W3C】和IE盒模型【怪异模式】。
由图片我们可以知道，这两种盒模型的宽度width计算方式不同。
标准盒模型的宽度=content；
IE盒模型的宽度=content+padding+border;
想要切换盒模型的方式也很简单，只需要修改box-sizing属性。
box-sizing: content-box //是标准盒子模型
box-sizing: border-box //是IE盒子模型
目前最好的解决方案是不要给元素添加具有指定宽度的内边距，而是尝试将内边距或外边距添加到元素的父元素和子元素。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。