Question

我正在尝试在另一个div中并排放置2个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识别其内部物体的高度？

Answer 1

这不是因为浮动div没有高度，这是因为浮动div不会影响父元素的大小。

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

#outer { overflow: auto; }

Answer 2

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

#outer: overflow: hidden;

或者将一些非显示内容添加到浮动div之后的外部div中，然后添加一个clear：两种样式规则。

您还可以添加：through css：after伪元素，以便在您应用了明确的div之后插入内容：两者都有 - 这样做的好处是不需要额外的标记。

我的偏好是第一个。

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

Answer 4

试试这个：

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

Answer 5

添加溢出：隐藏;到主要的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>

Answer 6

你还必须浮动外部div。包含floatet div并且没有浮动的div本身会崩溃。

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

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

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

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>

Answer 8

如果父项中的div浮动，则它不再是父div的一部分：通过检查父元素来检查它。解决问题有两种方法： 1）在父类的内部结束时创建一个空div，它作为.blank跟随css

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

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

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

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

CSS：浮动div的高度为0

8 个答案: