使用HTML / CSS包含浮动元素的正确方法？

Question

说我有以下HTML：

<head>
    <style>
        #container {
            border: 1px red solid;
        }
        .floaty {
            width: 200px;
            float: left;
            border: 1px green solid;
        }
    </style>
</head>
<body>
<div id='container'>
    Text inside the container
    <div class='floaty'>
    Floaty block 1<br/>
    Floaty block 1<br/>
    Floaty block 1<br/>
    </div>
    <div class='floaty'>
    Floaty block 2<br/>
    Floaty block 2<br/>
    Floaty block 2<br/>
    </div>
    <div class='floaty'>
    Floaty block 3<br/>
    Floaty block 3<br/>
    Floaty block 3<br/>
    </div>
</div>
</body>

这呈现为： 浮动的divs

将容器（红色边框）完全包围在浮动的绿色边框中的正确CSS方法是什么？

Answer 1

添加overflow: auto到容器，如下所示：

#container {
     border: 1px red solid;
     overflow: auto;
}

您可以在此处测试效果，并在此处找到有关其工作原理的非常好的描述。

Answer 2

添加overflow: auto到容器或应用clearfix 。

使用HTML / CSS包含浮动元素的正确方法？

问题描述

2 个解决方案

解决方案1
16 已采纳 2010-07-22 12:08:06

解决方案2
1 2010-07-22 12:07:59

使用HTML / CSS包含浮动元素的正确方法？

问题描述

2 个解决方案

解决方案1 16 已采纳 2010-07-22 12:08:06

解决方案2 1 2010-07-22 12:07:59

解决方案1
16 已采纳 2010-07-22 12:08:06

解决方案2
1 2010-07-22 12:07:59