我的css在這裏有什麼問題。向左浮動導致問題

當我使用螢火蟲並將鼠標懸停在父框上時，沒有顯示任何內容。我預料它會突出顯示3個子盒子（因爲他們是孩子們）。我的css在這裏有什麼問題。向左浮動導致問題

當我從子框中刪除浮動權，它工作正常。

<div class="parentbox"> 
    <div class="subbox">box1</div> 
    <div class="subbox">box2</div> 
    <div class="subbox">box3</div> 
</div> 

.parentbox 
{ 

} 

.subbox 
{ 
    margin-right:10px; 
    font-size:50px; 
    float:left; 
}

來源

2011-12-19 Ian Porter

嘗試：

.parentbox 
{ 
    overflow:auto; 
}

FYI：螢火蟲不會突出子元素，只是你正將注意力轉向的元素。

一個更好的辦法來做到以上應該是：

<div class="parentbox"> 
    <div class="subbox">box1</div> 
    <div class="subbox">box2</div> 
    <div class="subbox">box3</div> 
    <div style="clear:left;"></div> 
</div>

的比較，請參閱http://jsfiddle.net/3f22H/ - 它們都具有類似的最終結果。

來源

2011-12-19 14:12:14 SeanNieuwoudt

只是出於好奇 - 爲什麼你使用'auto'而不是'hidden'？ – 2011-12-19 14:14:09

@MyHeadHurts它只是強制parentbox可見和調整它的高度在這種情況下。更好的做法是引入清算元素。 – SeanNieuwoudt 2011-12-19 14:15:42

不，我認爲在這種情況下'overflow'更合適。我只是好奇你爲什麼使用'auto'而不是'hidden'。我發現添加'auto'會導致不需要的滾動條，其中'hidden'不會。但是我看到越來越多的人在StackOverflow上建議'auto'，所以我想知道是否我錯過了某些東西。 – 2011-12-19 14:18:39

你有浮動內盒的原因嗎？如果你刪除他們的浮動或添加一個浮動到父母它將修復。否則你需要清理孩子們的花車。

來源

2011-12-19 14:12:17 vmex151

計算父母的尺寸時，浮動的孩子不會增加父母的高度（它的高度應該是0）。您需要應用clearfix hack強制父母繪製直到其最底部的孩子的行。

這裏有一篇不錯的文章explains the topic。

來源

2011-12-19 14:16:09

我的css在這裏有什麼問題。向左浮動導致問題

回答

相關問題