twitter-bootstrap 为什么我的div没有高度？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/23877099/
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
Why does my div have no height?
提问by Hugo
I'm trying to mimic the row-column mechanism that twitter's bootstrap css framework uses.
我正在尝试模仿 twitter 的 bootstrap css 框架使用的行列机制。
I have a div containing some other divs which themselves contain come content. In my element inspector, it shows the container as having no height. Shouldn't the height of the div be the height of the elements it contains?
我有一个包含一些其他 div 的 div，这些 div 本身包含内容。在我的元素检查器中，它显示容器没有高度。div的高度不应该是它包含的元素的高度吗？
<div class="container">
<div class="row yellow">
<div class="column-1 red">
column-1
</div>
<div class="column-1 blue">
column-1
</div>
<div class="column-1 green">
column-1
</div>
<div class="column-1 orange">
column-1
</div>
<div class="column-1 red">
column-1
</div>
<div class="column-1 blue">
column-1
</div>
<div class="column-1 green">
column-1
</div>
<div class="column-1 orange">
column-1
</div>
<div class="column-1 red">
column-1
</div>
</div>
</div>
Here is a jsfiddle:
这是一个jsfiddle：
回答by web-tiki
The reason why the height or the containers is 0 is because you are floating all the contentinside them and floated elements don't expand the height (or width) of their parents.
高度或容器为 0 的原因是因为您正在浮动其中的所有内容，并且浮动元素不会扩展其父项的高度（或宽度）。
As you are floating all elents in rowit has 0 height and therfore so has .container.
当您漂浮时，其中的所有元素row都具有 0 高度，因此.container.
To prevent this, you can :
为了防止这种情况，您可以：
- set
overflow:hidden;on the containers demo - clear the float with a block element at the end of the container with
clear:both;demo
You can also check this question for reference : How do you keep parents of floated elements from collapsing?
您还可以查看此问题以供参考：如何防止浮动元素的父级崩溃？
