清除兩個浮動div的頁腳

這非常令人困惑，我使用BootStrap的clearfix類嘗試並簡單地清除頁腳，但它不起作用。我的代碼如下：清除兩個浮動div的頁腳

<div> 
    <div class="left">Left</div> 
    <div class="right">Right</div> 
    <div class="footer clearfix">Footer</div> 
</div>

.left { 
    background-color: red; 
    float: left; 
} 

.right { 
    background-color: blue; 
    float: right; 
} 

.footer { 
     background-color: orange; 
} 

// Clear fix 
.clearfix { 
    *zoom: 1; 
} 

.clearfix:before, 
.clearfix:after { 
    display: table; 
    line-height: 0; 
    content: ""; 
} 

.clearfix:after { 
    clear: both; 
}

我有小提琴這裏：http://jsfiddle.net/RYYFw/3/

能不能請您指教爲什麼這個簡單的清理工作不？

來源

2013-03-25 Jamie Fearon

您需要添加clear: both到您的頁腳：

.footer { 
    background-color: orange; 
    clear: both; 
}

請參閱updated jsFiddle。

來源

2013-03-25 10:09:00 BenM

+1當使用這個時，也不需要額外的'clearfix'。 – insertusernamehere 2013-03-25 10:12:23

所以我認爲有兩種清晰的？一個用於固定包含浮動div的非浮動容器的高度，另一個用於將浮動div壓入另一個（如本例中）。 – 2013-03-25 10:24:35

不是。 clearfix有點不恰當。它用於清除* child *元素的浮動。 'clear：both'用於防止元素浮在元素的任一側。 – BenM 2013-03-25 10:25:43

添加clear:both到.footer

.footer { 
     background-color: orange; clear: both; 
}

DEMO

來源

2013-03-25 10:10:14 Sowmya

clearfix是行不通的，因爲你通常用它來給父容器的高度值基於元素裏面有被漂浮。

你應該使用什麼是clear: both;

因此，你應該把它在你的頁腳：

.footer { 
    background-color: orange; 
    clear: both; 
}

來源

2013-03-25 10:13:20 kyooriouskoala

有問題的cleafix是什麼你認爲它是不同的。

在這種情況下，引導程序clearfix意味着clearfix類的任何浮動元素將具有適當的高度（默認情況下，如果浮動元素位於非浮動元素內，則非浮動元素將具有0高度）

（對於一個更好的http://css-tricks.com/all-about-floats/）

你想要的是一個方法來清除像這樣的註腳：

.clear { clear: both; }

的clear財產的手段浮動Ë不允許在所述元素的任一側上（它也可以被分配左側和右側）

來源

2013-03-25 10:15:00 Sean

清除兩個浮動div的頁腳

回答

相關問題