Question

我很困惑为什么当我浮动一个对象时它不再扩展它所在的容器的边界。这是我开始的一小段代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Learning CSS</title>

<style>
    .content 
    {
        border: #000000 solid 3px;
        clear: left;
        padding: 1em;
    }

    .stuff
    {

    }

</style>
</head>
<body>
<h1>Learning CSS</h1>
<div class="content">
    <h2>Page 1</h2>
    <p>Text...</p>
    <div class="stuff">
        <p>Text...</p>
        <p>Text...</p>
        <p>Text...</p>
        <p>Text...</p>
        <p>Text...</p>
        <p>Text...</p>
        <p>Text...</p>
        <p>Text...</p>
        <p>Text...</p>
        <p>Text...</p>
    </div>
    </div>
</body>
</html>

This link will display the results of this code

当我将.stuff的样式更改为：。东西 { 浮动：权利; }

This link shows what I get now

我希望有人解释为什么浮动内容不再扩展父div或包含在父div .content中？

提前致谢

Answer 1

您需要将overflow: hidden;添加到容器元素中。 Here是一个有效的jsFiddle。

修改：在这种情况下，overflow: hidden和overflow:auto都有效。

Answer 2

您需要overflow: auto到父容器，而不是overflow: hidden。

Answer 3

浮动元素之后的元素将围绕它流动。您可以使用clear属性来避免这种情况。

所以在你的div有课后，加上这个：

<div style="clear:both"></div>

See your example on jsfiddle here

Answer 4

您需要使用clearfix黑客来解决此问题。请尝试使用此代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Learning CSS</title>

<style>
    .content 
    {
        border: #000000 solid 3px;
        clear: left;
        padding: 1em;
        zoom: 1;
    }

    .stuff
    {
        float: left;
    }

    .content:before, .content:after
    {
        content: "";
        display: table;
    } 

    .content:after
    {
        clear: both;
    }

</style>
</head>
<body>
<h1>Learning CSS</h1>
<div class="content">
    <h2>Page 1</h2>
    <p>Text...</p>
    <div class="stuff">
        <p>Text...</p>
        <p>Text...</p>
        <p>Text...</p>
        <p>Text...</p>
        <p>Text...</p>
        <p>Text...</p>
        <p>Text...</p>
        <p>Text...</p>
        <p>Text...</p>
        <p>Text...</p>
    </div>
    </div>
</body>
</html>

Answer 5

要让浮动扩展其所在容器的边框，您需要将所谓的clearfix应用于容器。可能有十几种不同的方法可以做到这一点，所以我不会给你一个，而是提到一个很好的问题，其答案列出了几个：What methods of ‘clearfix’ can I use?

我不明白css float

5 个答案: