CSS: 浮动的div高度为0

Question

我正在尝试将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认识到其中包含的元素的高度？

- ario

---

https://www.google.com/search?gcx=w&sourceid=chrome&ie=UTF-8&q=containing+floats - meder omuraliev

这是我在谷歌上找到的第二个结果。 - Guillermo Gutiérrez

Answer 1

浮动的div没有高度并不是导致问题的原因，而是它们不影响父元素的大小。

你可以使用overflow样式来让父元素考虑浮动元素：

#outer { overflow: auto; }

- Guffa

---

+1 的原因是解释为什么会发生这种情况。技术上讲，这会导致外层元素为其浮动元素建立新的块级格式化上下文，因此能够扩展以包含它们。 - BoltClock

你可以尝试使用overflow: hidden;代替。只要周围元素的高度未定义，通常使用什么溢出模式并不重要，但有些浏览器可能会根据呈现模式和周围元素在某些情况下出现问题。 - Guffa

哇，这真的有效！（我甚至不知道为什么它有效，因为“overflow”的默认值已经是“auto”，而你只是再次设置它...） - Derek 朕會功夫

@Derek：div 的溢出默认值为 visible，而不是 auto。 - Guffa

如果 div 有阴影，overflow: auto; 不是一个好的选择，因为它会隐藏超出边框的任何内容。那么，最好的选择是 overflow: visible;。 - Paulo Dos Santos

@PauloDosSantos：你说得对，样式可能会影响阴影（或任何在元素本身外绘制的效果），但是使用overflow: visible;并不能产生所需的块级格式上下文，因为那已经是默认值了。你可能需要将其包装在另一个元素中，这样你就可以在内部元素上使用这种技术，在外部元素上使用阴影。 - Guffa

Answer 2

有几种解决方案：

#outer: overflow: hidden;

或者在浮动的div后面添加一些不显示的内容，然后添加clear:both样式规则到外部div。您还可以通过css添加:after伪元素来在这些div后插入内容，然后将clear:both应用于它 - 这样做的优点是不需要额外的标记。我更喜欢第一个方法。

- kinakuta

Answer 3

您可以通过插入一个具有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; } 

- aziz punjani

Answer 4

试试这个：

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

- Ayush

Answer 5

将overflow:hidden;添加到主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>

- Brian

Answer 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;
}

- Sven Bieder

Answer 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>

- jamesTheProgrammer

Answer 8

如果父级元素内的 div 元素被浮动，那么它就不再是父元素的一部分。通过检查父元素来确认此情况。要解决这个问题有两种方法： 1)在父元素末尾添加空 div，并将其类命名为 .blank。接下来在 CSS 样式中对其进行设置即可。

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

或者 2）给父元素添加一个类名 .clear-fix 并加入 CSS 样式

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

它将使父元素的高度等于其内容

- Aniket Jha