一.為什麼要清除浮動？
當父元素包裹的子元素有float屬性的時候，子元素即脫離了文件流，不再受限於父元素。這樣以來，子元素就無法影響父元素，就是說，父元素若沒有固定高度的話，父元素的高度就不會隨子元素的高度變化而變化。
二.怎麼清除浮動？
清除浮動的8種方法，按需求選取。
1.父級div定義偽類：after:和zoom
原理：利用:after和:before來在元素內部插入兩個元素塊，從面達到清除浮動的效果。其實現原理類似於clear:both方法，只是區別在於:clear在html插入乙個div.clear標籤，而clearfloat利用其偽類clear:after在元素內部增加乙個類似於div.clear的效果。下面來看看其具體的使用方法：
.clearfloat
/*zoom(ie轉有屬性)可解決ie6,ie7浮動問題*/
.clearfloat
:after
原理：新增乙個空div，利用css提供的clear:both清除浮動，讓父級div能自動獲取到高度
type="text/css">
.div1
.div2
.left
.right
style>
class="div1">
class="left">leftdiv>
class="right">rightdiv>
div>
class="div2">
div2
div>
缺點：不少初學者不理解原理；如果頁面浮動布局多，就要增加很多空div，讓人感覺很不好
建議：不推薦使用，但此方法是以前主要使用的一種清除浮動方法
3.父級div固定高度
優點：簡單、**少、容易掌握
缺點：只適合高度固定的布局，要給出精確的高度，如果高度和父級div不一樣時，會產生問題
建議：不推薦使用，只建議高度固定的布局時使用
4.父級div設定overflow:hidden屬性
原理：必須定義width或zoom:1，同時不能定義height，使用overflow:hidden時，瀏覽器會自動檢查浮動區域的高度
type="text/css">
.div1
.div2
.left
.right
style>
class="div1">
class="left">leftdiv>
class="right">rightdiv>
div>
class="div2">
div2
div>
缺點：不能和position配合使用，因為超出的尺寸的會被隱藏。
建議：只推薦沒有使用position或對overflow:hidden理解比較深的朋友使用。
5.父級div定義 overflow:auto
原理：必須定義width或zoom:1，同時不能定義height，使用overflow:auto時，瀏覽器會自動檢查浮動區域的高度 。
type="text/css">
.div1
.div2
.left
.right
style>
class="div1">
class="left">leftdiv>
class="right">rightdiv>
div>
class="div2">
div2
div>
缺點：內部寬高超過父級div時，會出現滾動條。
6.父級div 也一起浮動
原理：所有**一起浮動，就變成了乙個整體
優點：沒有優點
缺點：會產生新的浮動問題。
建議：不推薦使用，只作了解。
前端面試題HTML CSS基礎篇 清除浮動
這個也是面試過程中比較常問到的內容，也是基礎中的基礎 1.使用帶clear屬性的空元素 給浮動的元素後面新增乙個空白的div，給該div新增clear both 在左右兩側均不允許浮動元素,可以根據需要設定左右清除浮動 但該方法會在文件結構中新增無用的元素，增加dom結構，是文件結構複雜化，所以推薦...
前端CSS怎麼清除浮動？
前端怎麼清除浮動？方法一 使用帶clear屬性的空元素 在浮動元素後使用乙個空元素如 並在css中賦予.clear屬性即可清理浮動。亦可使用 或來進行清理。方法二 使用css的overflow屬性 給浮動元素的容器新增overflow hidden 或overflow auto 可以清除浮動，另外在...
前端面試CSS
權重分為四級 代表內聯樣式，如style 權值為 1000 代表 id 選擇器，如 content，權值為 100 代表類 偽類和屬性選擇器，如.content hover attribute 權值為 10 代表元素選擇器和偽元素選擇器，如div p，權值為 1。需要注意的是 通用選擇器 子選擇器 ...