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

【问题标题】：asp.net css why div child content is not on the parentasp.net css为什么div子内容不在父级上
【发布时间】：2014-05-03 12:50:41
【问题描述】：

我有这两个 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 有一个表格，如您在这张图片中看到的那样

【问题讨论】：

当你浮动一个元素时，它会将它从页面的“流”中取出，这样它就不会“占用任何空间”。 This page 有更多关于浮动如何工作的信息。它还介绍了如何解决此问题，以及您可能遇到的浮动问题。
@Zhihao 感谢您的链接。但是请您给出答案或提示来解决它吗？
看看这个：complexspiral.com/publications/containing-floats 然后可以通过使用 clearfix 找到解决方案，您可以在此处阅读：stackoverflow.com/questions/8554043/what-is-clearfix - 这应该让你开始寻找解决方案。

【解决方案1】：

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

您可以使用以下内容：

div#myDiv { overflow: hidden; }

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

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

【讨论】：

【解决方案2】：

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

但是如果你想让子 div 和父 div 的高度一样浮动呢？

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

在现有代码上，您只需设置 overflow:hidden on newUpContainer。很好走吧。。

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

就是这样.. :)

【讨论】：