数据结构
网络
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 次查看
广告