Question

我认为这是一种非常常见的情况。

我相对（没有双关语意）新CSS并且遇到浮动对齐问题。我有两个div，其中一个用于保存要浮动的主要内容left，另一个用于导航，应该浮动right。

无论如何，当不应用任何CSS格式时会发生这种情况。这是理想的行为;页面将按预期向下滚动：
Desired behavior

以下是我将float: left或float: right应用于相应元素时会发生的情况：
Undesired page overflow

他们都溢出了页面。我希望它能够拉伸页面，使其向下滚动，如果它不适合一个屏幕区域。

我的HTML片段：

<body>
<div id="wrapper">
    <div id="header"></div>
    <div id="content">
    <div id="main">
        <p>Lorem ipsum [...snip...]</p>
    </div>
    <div id="secondary">
        <p>Lorem ipsum [...snip...]</p>
    </div>
</div>
<div id="footer">&copy;</div>
</div>
</body>

和相应的CSS：

#content {
    padding:10px;
    padding-top: 110px;
    padding-bottom:60px;   /* Height of the footer */
}

#main {
    padding: 10px;
    float: left;
    width:70%;
    text-align:left;
}

#secondary {
    padding: 10px;
    float: right;
    width:20%;
}

为什么要这样做，我该如何解决？

Answer 1

任何浮动元素都会增加容器div的高度，因此浮动元素可能有1000行代码，但其父元素的高度将保持为零，除非浮动元素后面有一个块元素。

我已经修改了你的代码

<body>
<div id="wrapper" class="clrfx">
    <div id="header"></div>
    <div id="content">
    <div id="main" class="clrfx">
        <p>Lorem ipsum [...snip...]</p>
    </div>
    <div id="secondary" class="clrfx">
        <p>Lorem ipsum [...snip...]</p>
    </div>
</div>
<div id="footer">&copy;</div>
</div>
</body>

的CSS：

.clrfx:after {
    clear: both;
    display: block;
    content: "";
}

经验法则是，将class =“clrfx”分配给任何具有至少一个浮动子元素的Div。有些人使用<div class="clear"></div>，但这不应该用作清除是样式的一部分，而不是标记。

在最坏的情况下，如果你必须使用它，那么我会建议使用

<br class="clear" />

因为破线接近清算

Answer 2

清除花车，你应该没问题。

例如根据你的例子：

<body>
<div id="wrapper">
    <div id="header"></div>
    <div id="content">
    <div id="main">
        <p>Lorem ipsum [...snip...]</p>
    </div>
    <div id="secondary">
        <p>Lorem ipsum [...snip...]</p>
    </div>

    <!-- clear -->
    <div style="clear:both;"></div>
</div>
<div id="footer">&copy;</div>
</div>
</body>

更新：对于较旧的IE浏览器，清除div可能需要定义一个高度以赋予它“hasLayout”属性，否则它将忽略此div。 http://www.satzansatz.de/cssd/onhavinglayout.html

通常，人们会创建一个包含所有这些信息的类定义，因此您只需键入<div class="clear"></div>

以下是从http://sonspring.com/journal/clearing-floats

强制清除CSS的示例

.clear {
    clear: both;
    display: block;
    overflow: hidden;
    visibility: hidden;
    width: 0;
    height: 0;
}

有一些替代方法可以清除父div中的浮点数并删除额外的结构<div>标记，但我个人觉得如果这个解决方案确实存在，则不需要调查它们是否是防弹的。

Answer 3

正如你所说，你是CSS新手：Floated元素没有高度。因此#content默认为最小高度，即填充的组合高度。

在<div style="clear:both;"></div>之后添加div#secondary会强制它在浮动元素下面。由于此具有高度，因此#main会按预期运行。有关示例代码，请参阅Yuji's answer。

Answer 4

浮动元素将从流中移除，因此在计算父元素的高度并将其父元素设置为overflow: visible时不会考虑浮动元素。

您可以在浮动元素下面放置一个虚拟元素（使用clear属性强制虚拟元素到正确的位置），或者您可以将父元素设置为overflow: visible以外的其他元素。

Answer 5

要使包装器包含所有浮动元素，只需设置;

#wrapper {overflow: hidden;}

简单，你已经完成了。没有额外的标记。

CSS float可防止页面扩展

5 个答案: