CSS：浮动div的高度为0答案

【问题标题】：CSS: Floating divs have 0 heightCSS：浮动div的高度为0
【发布时间】：2022-01-14 15:07:48
【问题描述】：

我正在尝试将 2 个 div 并排放置在另一个 div 内，这样我就可以有 2 列文本，并且外部 div 可以在它们周围绘制边框：

HTML

<div id="outer">
    <div id="left">
         ...
    <div id="right">
</div>

CSS

#outer{
    background-color:rgba(255,255,255,.5);
    width:800px;
}

#left{
    float:left;
}

#right{
    width:500px;
    float:right;
}

但是，外部 div 的高度为 0px，因此边框不会绕过其他 div。如何让外层的 div 识别里面的东西的高度？

【问题讨论】：

google.com/…
这是我在 google 找到的第二个结果。

标签： html css

【解决方案1】：

不是浮动div没有高度，而是浮动div不影响父元素的大小。

您可以使用overflow 样式使父元素考虑浮动元素：

#outer { overflow: auto; }

【讨论】：

+1 用于解释为什么会发生这种情况。从技术上讲，这会导致外部元素的浮动为establish a new block formatting context，因此它能够扩展以包含它们。
@airo：你可以试试overflow: hidden;。只要没有为周围元素定义高度，通常使用哪种溢出模式无关紧要，但某些浏览器可能会在某些情况下采取行动，具体取决于渲染模式和周围元素。
哇这真的有效！（我什至不知道为什么会这样，因为 overflow 的默认值已经是 auto 而你只是重新设置它......）
@Derek：div 溢出的默认值是可见的，而不是自动的。
如果div 有阴影，overflow: auto; 不是一个好的选择，因为它会隐藏任何超出边界的东西。那么，最好的选择是overflow: visible;。

【解决方案2】：

这个问题有几个解决方案：

#outer: overflow: hidden;

或在浮动 div 之后的外部 div 中添加一些不显示的内容，然后添加 clear: both 样式规则。

您还可以添加 through css :after 伪元素以在您应用 clear: both 的 div 之后插入内容 - 这具有不需要额外标记的优点。

我的偏好是第一个。

【讨论】：

【解决方案3】：

试试这个：

<div id="outer">
    <div id="left">
         ...
    <div id="right">
    <div style="clear:both"></div>
</div>

【讨论】：

【解决方案4】：

添加溢出：隐藏；到主 div。

<style type="text/css">
#outer{
    background-color:rgba(255,255,255,.5);
    width:800px;
overflow: hidden;
border: 1px solid green;
}

#left{ 
    float:left;
border: 1px solid red;
}

#right{
    width:500px;
    float:right;
border: 1px solid yellow;
}
</style>

【讨论】：

【解决方案5】：

您可以通过在应用了 clear 属性的浮动元素之后插入一个元素来清除浮动，因为浮动子元素会导致父元素的高度为 0，因为它们不会将浮动子元素的高度带入考虑。

<div id="outer">
    <div id="left">
         ...
    <div id="right">
    <div class="clear"></div> 
</div>

#outer{
    background-color:rgba(255,255,255,.5);
    width:800px;
}

#left{
    float:left;
}

#right{
    width:500px;
    float:right;
}
.clear{ clear: both; }

【讨论】：

【解决方案6】：

您还必须浮动外部 div。包含浮动 div 且自身不浮动的 div 会崩溃。

#outer{
    background-color:rgba(255,255,255,.5);
    width:800px;
    float:left;
}

#left{
    float:left;
    width:300px;
}

#right{
    width:500px;
    float:right;
}

【讨论】：

【解决方案7】：

这样怎么样：

<style type="text/css">
#outer{
   background-color:rgba(255,255,255,.5);
   width:800px;
   border:thin solid #000000;
   height:300px;
   margin:5px;
   padding:10px;
}

#left{
   float:left;
   border:thin dashed #000000;
   width:385px;
   height:100px;
   margin:5px;
}

#right{
   width:385px;
   float:left;
   border:thin dashed #000000;
   height:100px;
   margin:5px;
}
</style>

<div id="outer">
   <div id="left">
   </div>
        ...
   <div id="right">
</div>
</div>

【讨论】：

【解决方案8】：

如果父级内的 div 是浮动的，则它不再是父级 div 的一部分：通过检查父级 element.no 来检查它以解决您的问题，有两种方法： 1）在父类的末尾创建一个空的div作为.blank所有后续css

.blank:after{
        content: "";
        clear:both;
        display:block;
    }

或者 2）给父类.clear-fix并添加css

.clearfix:after {
    content: "";
    clear: both;
    display: block;
}

它会给父母一个等于内容的高度

【讨论】：