很多CSS初學者往往很容易被浮動搞得暈頭轉向，經常碰到有朋友問“為什么我把ul里面的li都向左浮動了，然后我的ul就沒有背景了？”等等之類的問題。
此時，如果我們呢給ul加上1px的border的話，就會發(fā)現我們的ul從原來的一塊變成了一條線，這就是長說的浮動帶來的問題。其實解決這個問題，只需要短短的幾個屬性而已。
我個人的理解是瀏覽器在解析到浮動的時候，會將浮動的元素脫離開原來的父元素像上層浮起，就像小河里的木板是浮在水面上和河底是不接觸的。那么這個時候父元素相當于已經被拿空了，那么當然只會是我們看到的一條線的情況了。所以，對于初學者而言，必須時刻記住需要把浮起的木板再壓下去，也就是清除浮動。
這里介紹一個萬能的浮動清楚方法：
<style>
ul{overflow:hidden;width:100%}
li{float:left;display:inline-block}
</style>
<ul>
<li></li>
<li></li>
</ul>
只需要給浮動元素的父元素加上overflow:hidden屬性就可以很有效的將浮動清楚，阻止元素脫離父元素。但是同時引發(fā)了一個新的問題，就是當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
萬能浮動清除方法
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。
- 文/潘曉璐 我一進店門，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人，你說我怎么就攤上這事?！?“怎么了？”我有些...
- 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著，像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上，一...
- 文/蒼蘭香墨 我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼！你這毒婦竟也來了？” 一聲冷哼從身側響起，我...
- 正文 年R本政府宣布，位于F島的核電站，受9級特大地震影響，放射性物質發(fā)生泄漏。R本人自食惡果不足惜，卻給世界環(huán)境...
- 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間，已是汗流浹背。 一陣腳步聲響...
推薦閱讀更多精彩內容
- 我們在日常開發(fā)布局中經常會使用到流體布局，流體布局用到的一個最重要的屬性就是浮動，今天就來看看浮動的相關知識。 1...
