如何讓浮動div擴展到其父級的高度？

擴展浮動 Div 高度以匹配父級

浮動子元素可能會破壞父容器的垂直對齊方式。要解決此問題並確保浮動子div 的高度擴展以匹配其父級，請按照以下步驟操作：

1.設定父屬性：

將以下CSS 屬性加入父元素：

.parent {
    overflow: hidden;
    position: relative;
    width: 100%;
}

• overflow: hide可防止子元素溢出到父容器之外。
• position:relative 為子元素建立相對定位上下文。
• width:100% 確保父 div 佔據其容器的整個寬度。

2.配置浮動子級：

對於浮動子級div（例如.child-right），應用以下CSS 屬性：

.child-right {
    background: green;
    height: 100%;
    width: 50%;
    position: absolute;
    right: 0;
    top: 0;
}

• 背景：綠色分配綠色背景色以提高可見度。
• height: 100% 設定子 div 的高度以符合高度
• width: 50% 將子級 div 的寬度定義為父級寬度的一半。
• position:absolute 將子級 div 從正常文件流中移除，並將其絕對定位在父容器。
• right: 0 將子 div 與父容器的右邊緣對齊。
• top: 0 對齊子div到父div的上邊緣。

透過實現這些CSS屬性，浮動子div將自動擴展其高度以匹配其父div的高度，確保垂直對齊的佈局。

以上是如何讓浮動div擴展到其父級的高度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！