如何确定div保留剩余的水平空间？

Question

我试图从头开始创建自己的网站，现在考虑到HTML / CSS位时遇到了问题。

我正在尝试创建这种标准的“标题，导航，内容”布局，其中标题在顶部，导航在左侧，内容从标题的下方开始，并在导航的右侧

我使用以下代码：

<div id="head">
 <img src="..." id="logo" style="float:left">
</div>
<div id="nav">
  {some elements}
</div>
<div id="content">
 {some elements}
</div>

但是，一旦在我的代码中添加了“ style ='float：left'”，“ content”和“ nav” DIV就会自动移至“ head” DIV的右侧，是否有可能使“ head” “ DIV”保留“剩余的空间，这样DIV的”内容“和”导航“将不会向上移动到它的右边，而是保持在下面？

Answer 1

此问题称为“崩溃父母”。 为了防止这种情况，您必须清除浮动。

将此CSS添加到样式表中：

.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

并在标题中添加“ clearfix”类，例如

<div id="head" class="clearfix">
    <img src="..." id="logo" style="float:left">
</div>

有关清除浮点的更多信息，您可以查看以下网址-http: //www.tutorialrepublic.com/css-tutorial/css-alignment.php

Answer 2

<div style="width:250px;">
  <div id="head" style="width:100%; border:1px solid red;">
    <img src="..." id="logo"> Header-Logo
  </div>
  <div id="nav" style="float:left;width:47%;border:1px solid blue;">
    Navigation-Left
  </div>
  <div id="content" style="float:right; width:50%;border:1px solid blue;">
    Content-Right
  </div>
</div>

-我认为原因是标签id =“ head”中的“ float：left ”。 因为您要将标题放置在网站顶部，所以无需使用“ float：left”。

-您可以对标签id =“ nav”使用“ float：left” ，对标签id =“ content”使用“ float：right ”

结果如下： http : //jsfiddle.net/4JgA4/119/ =>无需注意我在某些标签内的所有信息（仅用于装饰：D）

Answer 3

清除浮标即可。

您需要将一个类添加到div和CSS中，如下所示：

.clear
{
    clear:both;

}

Answer 4

将overflow:hidden添加到#head元素中。 我不知道它为什么起作用，但是它确保所有浮动元素都包含在父级内部。