假設我們有一個非常簡單的場景 <div class="content"> <div class="left"> <p>some content</p> </div> <div class="right"> <p>some content</p> </div> </div> <div class="content"> <div class="left"> <p>some content</p> </div> <div class="right"> <p>some content</p> </div> </div>這是樣式： .content { width: 960px; height: auto; margin: 0 auto; background: red; clear: both; } .left { float: left; height: 300px; background: green; } .right { float: right; background: yellow; }問題是...當我向其中添加內容時，應該拉下父div，我們需要看到紅色背景...問題是，我看不到紅色背景充滿了所有高度。有任何想法嗎？？？
3 回答
素胚勾勒不出你
TA貢獻1827條經驗 獲得超9個贊
當子元素浮動時，它們將從文檔流中刪除。這樣做時，父級將不再具有定義的尺寸，因為子級在技術上不會占用空間。因此，父元素自身折疊。當絕對定位子元素時，也會發生相同的情況。
在這種情況下，我們可以通過添加overflow:hidden到父元素來修復它，從而強制其包含子元素。另外也overflow:auto可以工作。有人可能會建議它比可能更好，overflow:hidden因為您將能夠判斷出是否有任何計算不可用。
jsFiddle示例
.content {
overflow:hidden;
}
現在父元素不再折疊，紅色背景可見。
如果要在舊版瀏覽器中尋求支持，也可以使用clearfix，但我不建議這樣做。
幕布斯7119047
TA貢獻1794條經驗 獲得超8個贊
我在內容容器的末尾使用了一個空的clear div
添加了CSS：
.clear {
clear: both;
}
HTML：
<div class="content">
<div class="left">
<p>some content</p>
</div>
<div class="right">
<p>some content</p>
</div>
<div class="clear"></div>
</div>
Smart貓小萌
TA貢獻1911條經驗 獲得超7個贊
您可以嘗試此解決方案
.content:before, .content:after {
content: " ";
display: table;
clear: both;
}
或在內容div中添加display：table：
.content {
width: 960px;
height: auto;
margin: 0 auto;
background: red;
clear: both;
display: table;
}
- 3 回答
- 0 關注
- 504 瀏覽
相關問題推薦
添加回答
舉報
0/150
提交
取消