共计 1804 个字符，预计需要花费 5 分钟才能阅读完成。
浮动相关问题：
使得父元素包含子元素，常见的方式是为父元素设置 overflow:hidden 或浮动父元素。根本原因在于创建 BFC 的元素，子浮动元素也会参与其高度计算，即不会产生高度塌陷问题。实际上只要让父元素生成 BFC 即可，并不只有这两种方式。
复制代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″>
<!–The viewport meta tag is used to improve the presentation and behavior of the samples
on iOS devices--><meta name=”viewport” content=”initial-scale=1, maximum-scale=1,user-scalable=no”/>
<title></title>
<style>
html, body {height: 100%; width: 100%; margin: 0; padding: 0;}
#map{padding:0;}
.first{
margin:20px;
background:lightgreen;
border: 2px solid lightgreen;
/*display:inline-block;*/
/*overflow:hidden;*/
/*float: left;*/
/*position: absolute;*/
}
ul{
overflow:hidden;
margin:10px;
background:lightblue;
width:100px;
height:200px;
float: left;
}
li{margin:25px;}</style>
</head>
<body class=”claro”>
<div class=”first”>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul></div>
</body>
</html>
复制代码
将上例中 first 中任意一项注释去掉都可以得到包围浮动的效果，其中 overflow：hidden 方式，与正常流最接近。
关于清除浮动更详尽的方式，请大家参考这篇文章此处，dolphinX 道友的博客简洁明了。
多栏布局的一种方式
上文提到的一条规则：与浮动元素相邻的已生成 BFC 的元素不能与浮动元素相互覆盖。利用该特性可以作为多栏布局的一种实现方式。
多栏布局
这种布局的特点在于左右两栏宽度固定，中间栏可以根据浏览器宽度自适应。
IE 中也有与 BFC 类似的概念成为 hasLayout, 我平时工作最低也是使用 IE8，并没有涉及到这部分所以还请道友们查询其他资料。
总结
在我第一次接触到 BFC 时经常有一个疑问，BFC 的结构是什么样的，像 DOM 一样的树状结构，还是一个 BFC 集合。其实我们不需要关心 BFC 的具体结构，这要看浏览器的具体实现采用什么样的数据结构。对于 BFC 我们只需要知道使用一定的 CSS 声明可以生成 BFC，浏览器对生成的 BFC 有一系列的渲染规则，利用这些渲染规则可以达到一定的布局效果，为了达到特定的布局效果我们让元素生成 BFC。
对于 CSS 新手来说不建议涉猎 BFC，还是应该去看看相应的 CSS 布局规则，像《CSS 设计指南》、《CSS 权威指南》这两本都很不错，达到一定积累再来看 BFC，说不定会有一种豁然开朗的感觉。BFC 中几乎涉及到 CSS 布局的所有重要属性，这也是 BFC 的难点和我们需要掌握 BFC 的意义所在。
文章中的部分内容可能与道友看到的其他博客有所出入，毕竟每个人的工作经验、所遇问题跟测试方法不一样，差异在所难免，探讨技术的乐趣在于不断的总结积累与自我推翻，只要大方向正确细节问题可以慢慢探索。
参考文章
http://www.cnblogs.com/winter…
http://f2e-js.com/?p=2599
http://www.cnblogs.com/dolphi…
http://wenku.baidu.com/link?u…
http://reference.sitepoint.co…
http://www.yuiblog.com/blog/2…
http://www.cnblogs.com/winter…
