CSS清除浮動方法總結

2024-07-11 08:30:48

字體：大中小

來源：轉載

供稿：網友

清除浮動的原因

假設一個 div 內部有個浮動的 div，當內部 div 的高度要比外層的父級 div 高度大時，將會導致父級 div 高度無法隨著內部 div 的高度自適應，這是由于浮動元素已經脫離了正常文檔流，因此無法對父級元素產生影響。舉例如下：

復制代碼

代碼如下:
<style>
#a {
width: 100px;
border: 1px solid #ccc;
}
#b {
height: 50px;
float: left;
border: 1px solid #ccc;
}
</style>
<div id="a">A
<div id="b">B</div>
</div>

請輸入圖片描述

此時，我們就需要手動來清除浮動。

加入空 div

這是我之前的做法，即在結尾處添加一個空的 div，并設置 clear: both 屬性。

復制代碼

代碼如下:
<style>
#a {
width: 100px;
border: 1px solid #ccc;
}
#b {
height: 50px;
float: left;
border: 1px solid #ccc;
}
#clear {
clear: both;
}
</style>
<div id="a">A
<div id="b">B</div>
<div id="clear"></div>
</div>

請輸入圖片描述

這個方法看似簡單，但是如果清除浮動的地方較多，會產生很多無意義的 div，對于整個 HTML 結構無疑是有弊端的。

設定父級 div 高度

這個方法有點 hard code，由于父級 div 無法高度自適應，因此我們可以直接給父級 div 設置一個固定的高度值，如上例，考慮到 border 的值，設定父級 div 高度為 52px。

復制代碼

代碼如下:
<style>
#a {
width: 100px;
height: 52px;
border: 1px solid #ccc;
}
#b {
height: 50px;
float: left;
border: 1px solid #ccc;
}
</style>
<div id="a">A
<div id="b">B</div>
</div>

請輸入圖片描述

這個方法很快速但也脆弱，一旦內部浮動元素高度發生變化就無效了，所以只能應用于高度固定的場景。

設定父級 div 屬性 overflow

直接給父級 div 添加 overflow: hidden 或 overflow: auto 屬性，這里以 overflow: hidden 為例。

復制代碼

代碼如下:
<style>
#a {
width: 100px;
border: 1px solid #ccc;
overflow: hidden;
}
#b {
height: 50px;
float: left;
border: 1px solid #ccc;
}
</style>
<div id="a">A
<div id="b">B</div>
</div>

上一篇：ie6、ie7下overflow失效的有效解決方法

下一篇：CSS隱藏文字的6種方法

發表評論

共有條評論