BFC就是一写正常流，浮动流布局的一写规则，比如（BFC会自动计算元素内部的高度适应到父级,PS{ 可以用来清浮动} ）：
<!doctype html> <head> <meta charset="utf-8" /> <title>Clear float</title> <style> .container{ margin: 30px auto; width:600px; height: 300px; } .wrapper{ border:solid 3px #a33; } .main{ width: 100px; height: 100px; background-color: #060; margin: 10px; float: left; } </style> </head> <body> <div class="container"> <div class="wrapper"> <div class="main"></div> <div class="main"></div> <div class="main"></div> </div> </div> <div class="container"> <div class="wrapper" style="float:left;"> <div class="main">1</div> <div class="main">2</div> <div class="main">3</div> </div> </div> </body> </html>
2:BFC的另一个规则，（BFC不会与浮动的元素发生叠加）：
<!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <body> <style> body { position: relative; } .aside { width: 100px; height: 150px; float: left; background: #f66; } .main { height: 200px; background: #fcc; } .hd{ overflow:hidden; } </style> <div class="aside"></div> <div class="main"></div> <br> <div class="aside"></div> <div class="main hd"></div> </body> </html>
link_from
http://www.cnblogs.com/coco1s/p/3974077.html
and
http://www.cnblogs.com/lhb25/p/inside-block-formatting-ontext.html
原文：http://www.cnblogs.com/diligenceday/p/4021820.html