資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會研究
服裝研究
法律研究如何在 CSS 中防止浮動元素的父元素塌陷？
為了防止浮動元素的父元素塌陷，首先，我們將嘗試理解問題的本質。之後，我們將透過一些示例來解決這個問題，例如：
- 浮動元素的父元素是如何塌陷的？
- 使用 overflow 屬性防止浮動元素的父元素塌陷
- 使用 height 屬性防止浮動元素的父元素塌陷
浮動元素的父元素是如何塌陷的
示例
讓我們首先了解浮動元素的父元素是如何塌陷的。以下是一個示例：
<html>
<head>
<title>Example</title>
<style>
div{
padding: 10px;
}
</style>
</head>
<body>
<h1>Nested Divs</h1>
<div style="background-color: orange;">
<div>One</div>
<div>Two</div>
<div>Three</div>
</div>
</body>
</html>
輸出
現在，為子 div 設定 float: left。這將導致父 div 塌陷：
<div style="background-color: orange;"> <div style="float: left;">One</div> <div style="float: left;">Two</div> <div style="float: left;">Three</div> </div>
輸出
使用 overflow 屬性防止浮動元素的父元素塌陷
現在讓我們看看如何使用 overflow 屬性來防止浮動元素的父元素塌陷。我們將 div 的 overflow 屬性設定為 auto 值：
<div style="background-color: orange; overflow: auto">
示例
現在讓我們看看完整的示例：
<html>
<head>
<title>Example</title>
<style>
div{
padding: 10px;
}
</style>
</head>
<body>
<h1>Nested Divs</h1>
<div style="background-color: orange; overflow: auto">
<div style="float: left;">One</div>
<div style="float: left;">Two</div>
<div style="float: left;">Three</div>
</div>
</body>
</html>
輸出
使用 height 屬性防止浮動元素的父元素塌陷
現在讓我們看看如何使用 height 屬性來防止浮動元素的父元素塌陷。我們將 div 的 height 屬性設定一個值：
<div style="background-color: orange;height: 40px">
示例
現在讓我們看看完整的示例：
<html>
<head>
<title>Example</title>
<style>
div{
padding: 10px;
}
</style>
</head>
<body>
<h1>Nested Divs</h1>
<div style="background-color: orange;height: 40px">
<div style="float: left;">One</div>
<div style="float: left;">Two</div>
<div style="float: left;">Three</div>
</div>
</body>
</html>
輸出
更新於：2022年12月6日
155 次瀏覽
廣告