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

時間 2019-11-16

標籤 css 關於元素設置 float 屬性後父高度解釋解決方法欄目 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: #F00080;
 }
 #container > .item:nth-child(2) {
 background-color: #D8AAD8;
 }
 #container > .item:nth-child(3) {
 background-color: #A2aa5A;
 }
 #container > .item:nth-child(4) {
 background-color: #63B8FF;
 }
 </style>
</head>
<body>
<div id="container">
 <div class="item">
 No.1
 </div>
 <div class="item">
 No.2
 </div>
 <div class="item">
 No.3
 </div>
 <div class="item">
 INo.4
 </div>
</div>
</body>
</html>

代碼運行結果：css

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

一、設置父元素float
例如：ui

#container {
 background-color: #f1f1f1;
 width: 80%;
 margin: 20px auto;
 float: left;
 }

二、在最後一個設置浮動的子元素後加一個空div ，而且讓這個div清除浮動。能夠不用對父級設置高度也無需技術父級高度，方便適用，但會多加CSS和HTML標籤。spa

例如：code

 <div class="clear"></div>  
 .clear {clear: both;}

三、父元素設置overflow:hidden;或overflow:auto;。由於overflow:hidden屬性至關因而讓父級緊貼內容，這樣便可緊貼其對象內內容（包括使用float的div盒子），從而實現了清除浮動。htm

四、不要用浮動，而使用：子元素使用display:inline-table或者display:inline-block。對象

五、使用CSS的:after僞元素blog

after 僞元素（注意這不是僞類，而是僞元素，表明一個元素以後最近的元素）。給浮動元素的容器添加一個clearfix的class，而後給這個class添加一個:after僞元素實現元素末尾添加一個看不見的塊元素（Block element）清理浮動。element

.clearfix:after{
   content: " "; 
   display: block; 
   height: 0; 
   clear: both; 
   visibility: hidden;  
 } 
 
 <div id="container" class="clearfix"></div>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。