Html CSS：浮动 div 的高度为 0
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9024494/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS: Floating divs have 0 height
提问by ario
I'm trying to place 2 divs side by side inside of another div, so that I can have 2 columns of text and the outer div drawing a border around both of them:
我正在尝试将 2 个 div 并排放置在另一个 div 内，以便我可以有 2 列文本和外部 div 在它们周围绘制边框：
HTML
HTML
<div id="outer">
<div id="left">
...
<div id="right">
</div>
CSS
CSS
#outer{
background-color:rgba(255,255,255,.5);
width:800px;
}
#left{
float:left;
}
#right{
width:500px;
float:right;
}
However, the outer div registers a height of 0px and so the border doesn't go around the other divs. How do I make the outer div recognize the heights of the things inside it?
但是，外部 div 的高度为 0px，因此边框不会围绕其他 div。如何让外部 div 识别内部事物的高度？
回答by Guffa
It's not because the floating divs doesn't have a height, it's because the floating divs don't affect the size of the parent element.
这不是因为浮动 div 没有高度，而是因为浮动 div 不会影响父元素的大小。
You can use the overflowstyle to make the parent element take the floating elements in consideration:
您可以使用overflow样式使父元素考虑浮动元素：
#outer { overflow: auto; }
回答by kinakuta
There are a couple of solutions to this issue:
这个问题有几个解决方案：
#outer: overflow: hidden;
or add some non-displaying content to the outer div that comes after the floated divs that you then add a clear: both style rule to.
或者在浮动 div 之后的外部 div 中添加一些非显示内容，然后添加 clear: both 样式规则。
You can also add, through css, the :after pseudo-element to insert content after those divs that you then apply clear: both to - this has the advantage of not requiring extra markup.
您还可以通过 css添加:after 伪元素以在这些 div 之后插入内容，然后将其应用 clear: both to - 这具有不需要额外标记的优点。
My preference is the first one.
我的偏好是第一个。
回答by aziz punjani
You could clear the float by inserting an element after the floated elements that has a clearproperty applied to it because floated child elements cause the parent to have 0 height since they don't take the height of the floated children into consideration.
您可以通过在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; }
回答by xbonez
Try this:
尝试这个：
<div id="outer">
<div id="left">
...
<div id="right">
<div style="clear:both"></div>
</div>
回答by Brian
add overflow: hidden; to the main div.
添加溢出：隐藏；到主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>
回答by Sven Bieder
You must also float the outer div. Div's that contain floatet divs and that are not floated themselves collapse.
您还必须浮动外部 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;
}
回答by jamesTheProgrammer
How bout like this:
怎么会这样：
<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>
回答by Aniket Jha
if div inside a parent is floated it is no longer part of parent div:check it by inspecting parent element.no to fix your problem there are two methods: 1)make a empty div at end inside parent class it as .blank all following css
如果父级内的 div 浮动，则它不再是父级 div 的一部分：通过检查父级元素来检查它。没有解决您的问题有两种方法：1）在父类中的末尾创建一个空 div 将其作为 .blank 所有以下内容css
.blank:after{
content: "";
clear:both;
display:block;
}
Or 2) give parent a class .clear-fix and add css
或 2) 给父母一个类 .clear-fix 并添加 css
.clearfix:after {
content: "";
clear: both;
display: block;
} it will give parent a height equal to contents
它将给父母一个等于内容的高度
