浮动相关问题 | 乐趣区

浮动相关问题：

　　使得父元素包含子元素，常见的方式是为父元素设置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-->

<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>

<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...