資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會學
時裝學
法學如果容器元素包含浮動元素，為什麼其高度不變？
為了修復此問題，我們需要使用 overflow 屬性並將其設定在外部父級 div 上。我們有一個內部子 div 和外部父級 div −
<div class="outer"> <div class ="inner"> </div> </div>
外部父級 div 具有以下 CSS 樣式。min-height 為 100px，overflow 屬性為 auto。這不會讓容器元素的高度增加，即使它包含了浮動元素 −
.outer {
margin: 0 auto;
width: 960px;
min-height: 100px;
background-color:yellow;
overflow:auto;
}
我們上面討論的浮動元素，使用 float: right 屬性設定在內部子 div 中。下面是內部 div 的樣式 −
.inner {
width:500px;
height:200px;
background-color:blue;
float:right;
}
示例
讓我們看一個示例 −
<!DOCTYPE html>
<html>
<head>
<style>
.outer {
margin: 0 auto;
width: 960px;
min-height: 100px;
background-color:yellow;
overflow:auto;
}
.inner {
width:500px;
height:200px;
background-color:blue;
float:right;
}
</style>
</head>
<body>
<div class="outer">
<div class ="inner">
</div>
</div>
</body>
</html>
輸出
如果你移除了 overflow 屬性，那麼內部 div 將會溢位 div 外部，如下所示 −
因此，我們使用值 auto 的 overflow 屬性修復了以上問題。
更新於： 06-12-2022
100 次檢視
廣告