css清除浮動的方法總結

浮動後元素可以很好的幫我們進行頁面上的布局，但是浮動後我們為什麼要清除浮動呢？其實，清除浮動的本質是因為，子元素浮動，引起父元素內部高度為零，而後邊元素因為前邊元素高度為零，從而影響布局，最簡單直接方法是為父元素新增高度，但是在我們真正實際開發中，是不方便也給父元素新增固定高度，比如，新聞頁面，怎麼知道有多少個字呢？高度怎麼計算呢？

以下面的**為例子：

.son1,

.son2 
.box1 .son2 
.box2 
style>
head>
我是son1div>
我是son2div>
div>
我是box2div>
body>

兩個子盒子浮動，脫離標準流，不占有位置，父元素沒有高度，後邊box2盒子就會跑上來

額為標籤法

在浮動子元素後邊，新增乙個空盒子，**如下：

.son1,

.son2 
.box1 .son2 
.box2 
/* 2、此處設定clear： both */
.clear 
style>
head>
我是son1div>
我是son2div>
div>
div>
我是box2div>
body>

也可以達到我們想要的效果

3.利用after偽元素清除浮動

.clearfix:after 

.clearfix 
.son1,
.son2 
.box1 .son2 
.box2 
我是son1
我是son2
我是box2

content: '';

display: table;

}.clearfix:after

.clearfix

.son1,

.son2

.box1 .son2

.box2

CSS清除浮動方法總結

總括 詳細總結了css中清楚浮動的幾種方法。在非ie瀏覽器 如firefox 下，當容器的高度為auto，且容器的內容中有浮動 float為left或right 的元素，在這種情況下，容器的高度不能自動伸長以適應內容的高度，使得內容溢位到容器外面而影響 甚至破壞 布局的現象。這個現象叫浮動溢位，為了...

css清除浮動的方法總結

在各種瀏覽器中顯示效果也有可能不相同，這樣讓清除浮動更難了，下面總結8種清除浮動的方法，測試已通過 ie chrome firefox opera，需要的朋友可以參考下 清除浮動是每乙個 web前台設計師必須掌握的機能。css清除浮動大全，共8種方法。浮動會使當前標籤產生向上浮的效果，同時會影響到前...

CSS清除浮動總結

一 拋一塊問題磚 display block 先看現象 分析html 結構 divclass outer divclass div1 1div divclass div2 2div divclass div3 3div div 分析css 樣式 outer div1 div2 div3 這裡我沒有給...