css - 我如何确保 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“保留”剩余空间，这样“content”和“nav”DIV 就不会向上移动到它的右边，而是留在下面？

Answer 1

此问题称为“折叠的父项”。为防止这种情况，您必须清除 float 。

将此 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>

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