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>

这将呈现为： floaty divs

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

Answer 1

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

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

You can test the effect here，找到a very good description of how it works here。

Answer 2

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

Answer 3

On modern browsers，您可以使用 display: flow‑root; 或 contain 属性，这是执行此操作的非黑客方式：

https://developer.mozilla.org/docs/Web/Guide/CSS/Block_formatting_context

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

3 个答案: