CSS样式中的BFC

• 为什么会有BFC
• BFC是什么
• 如何触发BFC
• BFC可以解决什么问题
• 以上问题还有其他解决方案么
  带着以上问题，我们来看一下平时在给页面布局时遇到的烦人问题吧。

BFC是Block Formatting Context的缩写，中文翻译为"块级格式化上下文"
它决定了元素如何对其内容进行定位，以及与其他元素的关系和相互作用，当涉及到可视化布局的时候，Block Formatting Context提供了一个环境，HTML元素在这个环境中，按照一定规则进行布局。

BFC的目的是为了形成一个完全独立的空间，让空间中的子元素不会影响到外面的布局。那么如何才能创造这样一个神奇的空间呢？我们可以为元素设置一些CSS属性，就能触发这一空间！最常用的规则有四种：

• float不为none
• position不为relative和static
• overflow为auto，scroll和hidden
• display的值为：table-cell或inline-block
  在知道了触发规则后，我们怎么运用它，又能为我们解决什么问题呢？

常见问题一 浮动元素的父元素高度塌陷

假设有以下html结构与对应样式

.container{
	width:100%;
	background-color:blue;
	border:1px solid red;
}
.float{
	float:left;
	width:100px;
	height:50px;
	background-color:yellow;
	border:1px solid black;
	box-sizing:border-box;
}

<!-- 父元素高度塌陷的情况 -->
<div class="container">
	<div class="float">float1</div>
	<div class="float">float2</div>
	<div class="float">float3</div>
	<div class="float">float4</div>
</div>

此时，由于父元素中的子元素设定为浮动，从而脱离了标准文档流，导致父元素无法检测到子元素的存在，从而导致父元素的高度为0（此示例实际为上下边框和的2px）

为了在不设定高度的情况下，让父元素识别子元素，并达到让元素撑满父元素的效果，可以使用以下css属性触发父元素的BFC：
overflow:hidden

 .container{
     width:100%;
     background-color:blue;
     border:1px solid red;
     overflow:hidden;
 }

效果：

display:tabel-cell

 .container{
     width:100%;
     background-color:blue;
     border:1px solid red;
     display:table-cell;
 }

效果：

display:inline-block

 .container{
     width:100%;
     background-color:blue;
     border:1px solid red;
     display:inline-block;
 }

效果：

position:fixed

 .container{
     width:100%;
     background-color:blue;
     border:1px solid red;
     position:fixed;
 }

效果：

position:absolute

 .container{
     width:100%;
     background-color:blue;
     border:1px solid red;
     position:absolute;
 }

效果：

当我们在页面布局时，考虑一些因素无法给父元素设置上述属性时，还可以考虑以下的方案：

1. 让父元素浮动：让父元素也脱离标准文档流，从而让父元素自适应子元素的高度。（优点：代码量少；缺点：影响父元素后面的元素排列）
2. 给父元素添加固定高度，只适用于已知子元素高度的情况（优点：快速解决塌陷问题；缺点：不灵活，难以维护）
3. 在浮动子元素后边添加一个空元素，并设置clear:both来清除浮动（优点：简单快速；缺点：增加了无意义标签，不利于日后维护，违反html语义化标准）
4. 为父元素添加:after{clear:both}（优点：结构语义完全正确；缺点：复用不当导致代码量增加）

 .container {
     width: 100%;
     background-color: blue;
     border: 1px solid red;
 }

 .float{
     float: left;
     width: 100px;
     height: 50px;
     background-color: yellow;
     border: 1px solid black;
     box-sizing: border-box;
 }

 .clearfix:after {
     content: "";
     display: block;
     clear: both;
 }

<!-- 解决父元素高度塌陷的情况 -->
<div class="container clearfix">
    <div class="float">float1</div>
    <div class="float">float2</div>
    <div class="float">float3</div>
    <div class="float">float4</div>
</div>

效果：

常见问题二 自适应布局

当我们希望实现一个页面两栏布局，左侧宽度固定，右侧根据剩余空间，自适应宽度的时候，如果右侧内容过多，会导致下图的现象。

左侧浮动元素被文字包围了？？？
我们可以利用刚才学习的触发右侧父元素的BFC来解决这个问题。
设置属性overflow:hidden

 .slide {
     float: left;
     width: 200px;
     margin-left:15px;
     height: 500px;
     background-color: rgba(64,77,230,0.5);
     border-radius: 7px;
     margin-right:5px;
 }

 .section {
     margin-right:15px;
     height:100%;
     background-color: red;
     border-radius: 7px;
     overflow:hidden;
 }

效果：

常见问题三 垂直元素margin合并

当两个垂直块级元素A与B，A设置了margin-bottom:10px，B设置了margin-top:20px，我们希望页面展示给我们的效果为，上下间距一共30px,然而打开开发者工具，我们观察发现，实际上元素AB间的margin为两者较大的那个值，即20px。这就是垂直元素的margin合并现象。为了解决这个问题，我们可以给一个元素添加父元素，并给这个父元素触发BFC来解决margin合并问题。

 .father{
     overflow:hidden;
 }
 .class1 {
     width: 200px;
     height: 200px;
     background-color: yellow;
     margin-bottom: 10px;
 }

 .class2 {
     margin-top: 20px;
     width: 200px;
     height: 200px;
     background-color: cyan;
 }

<div class="father">
    <div class="class1"></div>
</div>
<div class="class2"></div>

效果：