如果容器元素包含浮动元素，为什么它的高度不会增加？

2022-12-12 18:50:07 人气: 5

要修复这种用法，我们需要使用 overflow 属性并将其设置在外部父 div 上。我们有一个内部子 div 和一个外部父 div - <div class=“outer”> <div class =“inner”> </div> </div> 外部父 div 使用以下 CSS 样式进行设置。最小高...

要修复这种用法，我们需要使用 overflow 属性并将其设置在外部父 div 上。我们有一个内部子 div 和一个外部父 div -

外部父 div 使用以下 CSS 样式进行设置。最小高度设置为 100px，溢出属性设置为 auto。这不会让容器元素的高度增加，即使它包含浮动元素 -

.外部 { 边距： 0 自动; 宽度：960像素; 最小高度：100px; 背景颜色：黄色; 溢出：自动; }

我们上面讨论的 float 元素是使用 float： right 属性在内部子 div 中设置的。下面是内部 div 的样式 -

.内 { 宽度：500px; 高度：200px; 背景颜色：蓝色; 浮子：右; }

例

让我们看一个例子 -

<！DOCTYPE html> <html> <head> <style> .outer { 边距： 0 自动; 宽度：960像素; 最小高度：100px; 背景颜色：黄色; 溢出：自动; } .内 { 宽度：500px; 高度：200px; 背景颜色：蓝色; 浮子：右; } </style> </head> <body> <div class=“outer”> <div class =“inner”> </div > </div> </body> </html>

输出

如果要删除溢出属性，则内部 div 将在 div 外部溢出，如下所示 -

因此，我们使用值为 auto 的溢出属性修复了上述问题。

#如果 #浮动 #元素 #为什么 #高度

如果容器元素包含浮动元素，为什么它的高度不会增加？

例

输出

评论0