假设我有以下 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>
呈现为:
让容器(红色边框框)完全包围 float 绿色边框框的正确 CSS 方法是什么？
最佳答案
给容器添加一个overflow: auto，像这样:
#container {
border: 1px red solid;
overflow: auto;
}
You can test the effect here , 并找到 a very good description of how it works here .
关于html - 使用 HTML/CSS 包含 float 元素的正确方法？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/3308615/