1.两个概念：
包含块：包含浮动元素的父元素块。
浮动元素：脱离了正常的文档布局流，向左（右）靠近包含块外边框显示，这样也会出现文字围绕。
BFC:块级格式化上下文，它是一个独特的块，里面的元素不会影响到包含块外面，同时包含块内部有独特的布局。
2.BFC能产生的条件
2.1 body 根元素： 例如：
<style> div{ width: 100px; height: 100px; background: lightblue; margin: 100px; } </style> <body> <div></div> <div></div> </body> <!-- body高度为300，两个div的margin合并，div之间具体为100px -->
解决之道：
<style> .container { overflow: hidden; <!-- 通过设置overflow为hidden解决 --> } p { width: 100px; height: 100px; background: lightblue; margin: 100px; } </style> <body> <div class="container"> <p></p> </div> <div class="container"> <p></p> </div> </body>
2.2 包含块中含有浮动元素
<div style="border: 1px solid #000;">
<!--包含了浮动元素，该包含块只有2px的宽度-->
<div style=" 100px;height: 100px;background: #eee;float: left;"></div>
解决之道：包含块加属性：overflow: hidden;
解决多个浮动元素被挤下的情况.例如：
<div style="height: 100px; 100px;float: left;background: lightblue">我是一个左浮动的元素</div>
<div style=" 200px; height: 200px;background: #eee">我是一个没有设置浮动,
也没有触发 BFC 元素, 200px; height:200px; background: #eee;</div>
<!--第二个元素有部分被浮动元素所覆盖-->
解决之道：
第二个元素添加属性：overflow: hidden;
3.BFC能解决的问题
3.1 防止两个块的外边距合并
3.2 防止文字围绕
3.3 解决多个浮动元素被挤下的情况。
3.4 包含块设置BFC，可以包含浮动元素，解决包含块width=0时，使浮动孩子将会脱离页面的常规流。