BFC的作用：
使 BFC 内部浮动元素不会到处乱跑；即子元素浮动不会使父元素塌陷，让子元素一定在父元素的包裹之下和浮动元素产生边界。
让元素产生BFC的方法
display: flow-root;overflow: hidden;
案例
使 BFC 内部的浮动元素不会到处乱跑案例：
<html ng-app="ionicApp">
<head>
<meta charset="utf-8">
<style>
.out{
border: 3px solid red;
min-height: 20px;
display: flow-root;
}
.in{
background: gray;
height: 100px;
width: 50px;
float: left;
}
</style>
</head>
<body>
<div class="out">
<div class="in"></div>
</div>
</body>
</html>
两栏自适应（产生边界案例）：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0;
padding: 0;
}
.left{
float: left;
width: 100px;
height: 100px;
background: pink;
}
.right{
/*overflow: hidden的作用*/
/*让这个元素绝对绝缘 bfc*/
/*不让其他浮动元素影响自己*/
/*不让自己的浮动去影响别的元素*/
overflow: hidden;
}
</style>
</head>
<body>
<div class="left"></div>
<div class="right">
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容
</div>
</body>
</html>
bfs详解：http://www.zhangxinxu.com/wordpress/2015/02/css-deep-understand-flow-bfc-column-two-auto-layout/
注意：若固定宽度为右容器，左边自适应。html中必须要先写右容器。因为若左容器在前，代码从上到下执行，左容器浮动会先占满整行，右容器只能在下浮动，如下图。
