CSS浮动防止页面扩展_Css_Css Float

CSS浮动防止页面扩展

css

CSS浮动防止页面扩展,css,css-float,Css,Css Float,我认为这是一种非常常见的情况我对CSS比较陌生（没有双关语的意思），并且对浮动对齐有问题。我有两个divs，一个将主要内容放在左侧，另一个用于导航，应该放在右侧不管怎样，下面是当我不应用任何CSS格式时发生的情况。这是期望的行为；页面将按预期向下滚动：下面是我将float:left或float:right应用于相应元素时发生的情况：它们都溢出了页面。我想让它拉伸页面，以便在一个屏幕区域不适合时向下滚动我的HTML的一个片段： <body> <div id="wra

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

我对CSS比较陌生（没有双关语的意思），并且对浮动对齐有问题。我有两个

div

s，一个将主要内容放在左侧，另一个用于导航，应该放在右侧

不管怎样，下面是当我不应用任何CSS格式时发生的情况。这是期望的行为；页面将按预期向下滚动：

下面是我将

float:left

或

float:right

应用于相应元素时发生的情况：

它们都溢出了页面。我想让它拉伸页面，以便在一个屏幕区域不适合时向下滚动

我的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>

它为什么要这样做，我如何修复它？

清除浮动，您应该会没事的

例如，根据您的示例：

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

有其他方法可以清除父div中的浮动并删除额外的结构化标记，但我个人认为没有必要调查它们是否是防弹的，如果这个解决方案确实是

正如您所说，您是CSS新手：浮动元素没有高度。因此，

#content

默认为最小高度，即填充物的组合高度

在

div#secondary

之后添加

将强制其位于浮动元素下方。由于此div确实有一个高度，因此它会导致

#main

按预期运行。有关示例代码，请参见。

浮动元素从流中删除，因此在计算其父元素的高度时，不考虑浮动元素，并且将其父元素设置为“溢出：可见”

您可以在浮动元素下面放置一个虚拟元素（使用

clear

属性强制虚拟元素到正确的位置），或者您可以将父元素设置为除

溢出：可见之外的其他内容，以使包装器包含所有浮动元素，只需设置即可
#wrapper {overflow: hidden;}

简单，你就完成了。无额外标记。
任何浮动元素都会增加容器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>

经验法则是，将class=“clrfx”分配给至少有一个浮动子元素的任何Div。有些人使用
，但这不应该被使用，因为清除是样式的一部分，而不是标记的一部分
在最坏的情况下，如果你必须使用这个，那么我会建议使用
<br class="clear" />



因为断开线接近于清除，这是不正确的。浮动元素具有高度。相关的因素是它们不是流程的一部分。请，请，请，不要使用这种方法！没有理由用不必要的div来增加你的加价。谢谢你的否决票。各自为政。我不喜欢overflow:hidden，因为它会导致相对位置的问题，而：after类型修复需要更混乱的标记和特定于浏览器的规则。我投了反对票，因为我绝对不喜欢看到它。这是乱七八糟的代码，永远不应该这样做。总有另一种解决方案。特别是当你教别人如何编码时，将内容和布局分开是很重要的。违反了这种分离。至少它简单可靠。：）
<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>

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

<br class="clear" />