很多CSS初学者往往很容易被浮动搞得晕头转向，经常碰到有朋友问“为什么我把ul里面的li都向左浮动了，然后我的ul就没有背景了？”等等之类的问题。
此时，如果我们呢给ul加上1px的border的话，就会发现我们的ul从原来的一块变成了一条线，这就是长说的浮动带来的问题。其实解决这个问题，只需要短短的几个属性而已。
我个人的理解是浏览器在解析到浮动的时候，会将浮动的元素脱离开原来的父元素像上层浮起，就像小河里的木板是浮在水面上和河底是不接触的。那么这个时候父元素相当于已经被拿空了，那么当然只会是我们看到的一条线的情况了。所以，对于初学者而言，必须时刻记住需要把浮起的木板再压下去，也就是清除浮动。
这里介绍一个万能的浮动清楚方法：
<style>
ul{overflow:hidden;width:100%}
li{float:left;display:inline-block}
</style>
<ul>
<li></li>
<li></li>
</ul>
只需要给浮动元素的父元素加上overflow:hidden属性就可以很有效的将浮动清楚，阻止元素脱离父元素。但是同时引发了一个新的问题，就是当overflow:hidden会将超出父元素宽度范围的内容隐藏，也就是说我们就可能不能实现竖直的二级导航类的功能了。
此时，另一个万能方法就此诞生
<style>
.box{width:100%}
.float{float:left;display:inline-block}
.clear{clear:both;float:none}
</style>
<div class="box">
<div class="float"></div>
<div class="float"></div>
<div class="clear"></div>
</div>
在父元素的最后添加一个CSS为clear:both;float:none的元素，他可以在在父元素不能overflow:hidden的情况下为您完美解决浮动产生的所有困扰。
总结一下，清楚浮动的方法也就是三个overflow:hidden，clear:both以及float:none
万能浮动清除方法
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 我们在日常开发布局中经常会使用到流体布局，流体布局用到的一个最重要的属性就是浮动，今天就来看看浮动的相关知识。 1...
