CSS響應 - 清除後，div丸/堆棧，而不是回到正常

我試圖學習響應網站。但我會卡在這裏CSS響應 - 清除後，div丸/堆棧，而不是回到正常

div { 
 
\t display: block; 
 
\t height: 50px; 
 
} 
 
.header { 
 
\t width: 50%; 
 
\t background-color: red; 
 
} 
 
.left { 
 
\t background-color: green; 
 
\t float: left; 
 
\t width: 50%; 
 
} 
 
.right { 
 
\t background-color: blue; 
 
\t float: left; 
 
\t width : 50%; 
 
} 
 
.clear { 
 
\t display: none; 
 
\t clear: both; 
 
} 
 
.footer { 
 
\t width: 50%; 
 
\t background-color: yellow; 
 
}

<!doctype html> 
 
<html> 
 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
<head> 
 
</head> 
 
<body style="width: 100%"> 
 
<div class="header">without float</div> 
 
<div class="header">without float</div> 
 
<div class="left">kiri</div> 
 
<div class="right">kanan</div> 
 
<div class="clear"></div> 
 
<div class="footer">after clear xxxxxxxxxx xxxxxx</div> 
 
<div class="footer">after clear shshjsjaa shsusus</div> 
 
</body> 
 
</html>

爲什麼DIV類頁腳沒有恢復到正常狀類的頭？

正如我所知清楚：兩者都清楚：左邊是擦除浮動：左邊的規則。但我不知道爲什麼我的頁腳看起來丸起來

查找此圖片看到顯示

來源

2016-12-01 plonknimbuzz

不要添加「顯示：無;」與「明確：兩者」。這使div被隱藏起來。

來源

2016-12-01 04:05:13 Kanu

我只知道這是一個獨立的股利。感謝兄弟 – plonknimbuzz

你不需要帶班清楚有

檢查這個片段

div { 
 
    display: block; 
 
    height: 50px; 
 
} 
 
.header { 
 
    width: 50%; 
 
    background-color: red; 
 
} 
 
.left { 
 
    background-color: green; 
 
    float: left; 
 
    width: 50%; 
 
} 
 
.right { 
 
    background-color: blue; 
 
    float: left; 
 
    width: 50%; 
 
} 
 

 
.footer { 
 
    width: 50%; 
 
    background-color: yellow; 
 
    clear:both; 
 
}

<html> 
 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 

 
<head> 
 
    <style> 
 
    </style> 
 
</head> 
 

 
<body style="width: 100%"> 
 

 
    <div class="header">without float</div> 
 
    <div class="header">without float</div> 
 
    <div class="left">kiri</div> 
 
    <div class="right">kanan</div> 
 
    
 
    <div class="footer">after clear xxxxxxxxxx xxxxxx</div> 
 
    <div class="footer">after clear shshjsjaa shsusus</div> 
 

 
</body> 
 

 
</html>

來源

2016-12-01 04:34:43 Geeky

感謝兄弟。這個問題已經回答了。但是因爲你給了我新的知識，我也會投我的票。非常感謝你 – plonknimbuzz

CSS響應 - 清除後，div丸/堆棧，而不是回到正常

回答

相關問題