CSS關於子元素設置了float屬性後父元素高度爲0的解釋和解決方法

時間 2019-11-18

標籤 css 關於元素設置 float 屬性後父高度解釋解決方法欄目 CSS 简体版

原文原文鏈接

先貼一個常見的浮動代碼父元素div設置背景色爲灰色#f1f1f1，子元素div分別設置不一樣的顏色css

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>test1</title>
<style type="text/css">
#container {
background-color: #f1f1f1;
width: 80%;
margin: 20px auto;
}
.item {
float: left;
color: white;
text-shadow:0 1px black;
margin: 10px 20px;
padding: 20px;
}
#container > .item:nth-child(1) {
background-color: #F08080;
}
#container > .item:nth-child(2) {
background-color: #D8BFD8;
}
#container > .item:nth-child(3) {
background-color: #A2CD5A;
}
#container > .item:nth-child(4) {
background-color: #63B8FF;
}
</style>
</head>
<body>
<div id="container">
<div class="item">
I am No.1
</div>
<div class="item">
I am No.2
</div>
<div class="item">
I am No.3
</div>
<div class="item">
I am No.4
</div>
</div>
</body>
</html>
html

這個代碼會生成以下的效果：ui

咱們發現父元素根本沒有高度（審查元素能夠看出父元素div#container的高度=0）spa

分析：htm

浮動float屬性會使得元素脫離當前HTML文檔流，那麼會使得：當前HTML文檔會看成設置float屬性的元素不存在同樣。那麼，因爲這5個子元素都設置了float，因此能夠看做父元素#container內根本沒有內容，div在沒內容的時候表現正好是高度=0.文檔

解決方法：it

1設置父元素floattable

例如：class

#container {
background-color: #f1f1f1;
width: 80%;
margin: 20px auto;
float: right;
} 這樣，父元素也是脫離當前文檔流，子元素和父元素一塊兒脫離，而且子元素仍在父元素內，父元素內容不空了，因此高度會適應子元素高度。
test

2在最後一個設置浮動的子元素後加一個空div ，而且讓這個div清除浮動。

例如<div class="items"></div>

.items {clear: both;}

3父元素設置overflow:hidden;

4不要用浮動，而使用：子元素使用display:inline-table或者display:inline-block

上述這些辦法獲得的效果以下：