[英]Proper way to contain floating elements using HTML/CSS?
Say I have the following HTML: 说我有以下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>
This renders as: 这呈现为:
What's the proper CSS way to have the container (red-bordered box) completely surround the floaty green-bordered boxes? 将容器(红色边框)完全包围在浮动的绿色边框中的正确CSS方法是什么?
Add an overflow: auto
to the container, like this: 添加
overflow: auto
到容器,如下所示:
#container {
border: 1px red solid;
overflow: auto;
}
You can test the effect here , and find a very good description of how it works here . 您可以在此处测试效果 ,并在此处找到有关其工作原理的非常好的描述 。
添加overflow: auto
到容器或应用clearfix 。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.