asp.net css为什么div子内容不在父级上

Question

我有这两个div

<div id="newUpContainer" style="width:100%">
    <div id="onlineBookingDiv" style="float: right; width:40%; margin-top:20px;">

内部div有表格，其高度几乎为560px。

我正在使用firebug和Google Chrome来检查父div的大小。

但我得到的是大小为0.虽然这个图片中显示的子div有一个表格

我应该怎么做才能使父div中内部div的内容退出？

Answer 1

可能是因为div中的所有元素都已浮动。当所有子元素都浮动时，该元素似乎根本不占用任何空间。如果你想解决这个问题，你可以使用几个技巧。

您可以使用以下内容：

div#myDiv { overflow: hidden; }

第二种也是比较流行的方法是clearfix hack。

一些CSS框架包含一个.clearfix类，您可以将其应用于此类元素，例如Twitter bootstrap。

Answer 2

因为孩子div的float:right而引用http://mytactics.blogspot.com/2014/03/parent-div-height-zero0-even-child-div.html

如果从子div中删除 float 属性，它将按您的意愿工作。它会显示适当的高度..

但是如果你想将子div浮动到右边以及父div的高度呢？

你需要在父div上设置overflow:hidden ..

在现有代码上，您只需设置溢出：隐藏在newUpContainer 上。并且很好 去..

<div id="newUpContainer" style="width:100%;overflow:hidden;">
    <div id="onlineBookingDiv" style="float: right; width:40%; margin-top:20px;">

多数民众赞成......：）

check the link