0

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

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

此链接将显示此代码的结果

当我将 .stuff 的样式更改为： .stuff { float:right; }

这个链接显示了我现在得到的

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

提前致谢

4

5 回答 5

1

您需要添加overflow: hidden;到您的容器元素。这是一个工作的jsFiddle。

编辑：在这种情况下都可以工作overflow: hidden。overflow:auto

于 2013-09-12T22:46:54.383 回答
1

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

于 2013-09-12T22:47:51.093 回答
0

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

所以在你的 div 有类的东西之后，添加这个：

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

在此处查看您在 jsfiddle 上的示例

于 2013-09-12T22:47:03.463 回答
0

您需要使用clearfix hack 来解决此问题。试试这个代码：

<!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>
于 2013-09-12T22:52:21.867 回答
0

要让浮动扩展它所在容器的边框，您需要对容器应用所谓的 clearfix。可能有十几种不同的方法可以做到这一点，所以我不会给你一个，而是给你一个很好的问题，它的答案列出了几个：我可以使用哪些“clearfix”方法？

于 2013-09-13T11:25:19.500 回答