不擴展父元素高度的元素

我有一個容器，其中放置了一堆元素，我的期望是容器會向下擴展，因爲容器中充滿了元素。不幸的是，這種情況並非如此。我有一些div浮在我的容器邊緣。我能夠用一堆中斷標籤來解決這個問題，但這是一個sl solution的解決方案。不擴展父元素高度的元素

也許我的CSS不正確，但我不知道在哪裏。長選擇清單和主要描述應該是駐留在上面的白色方框內。

這是Fiddle。

編輯：Uwe帶領我去研究漂浮物。我發現在正常流程佈局中不考慮花車。那麼這是如何解決的？

編輯2：我找到了一個clearfix解決方案。

.clearfix:after { 
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden; 
} 
.clearfix { 
    display: inline-block; 
} 
* html .clearfix { 
    height: 1%; 
} /* Hides from IE-mac \*/ 
    .clearfix { 
     display: block; 
}

來源

2012-06-10 Jon

我猜的是'float'CSS屬性是這個原因（雖然我不是這些東西的專家）。 –

我已經偶然發現了一個clearfix解決方案。看到我編輯的帖子。 – Jon

@Jon：另一個clearfix解決方案（更短）：http://nicolasgallagher.com/micro-clearfix-hack/ – Geert

有很多方法可以清除浮標;只需追加overflow: hidden;至.main即可解決您的問題。

實際上，直接清除導致問題的浮動可能更好，而不是將修復應用到父div。我真的建議添加以下屬性，而不是到.bottom：

.bottom { 
    clear: both; 
    overflow: hidden; 
}

clear: both發生在.content清除花車的照顧。
overflow: hidden負責清除漂浮在.bottom

你也應該考慮除了class屬性爲你的HTML標籤使用id屬性。

來源

2012-06-10 09:59:01 Wex

不擴展父元素高度的元素

回答

相關問題