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

本文介绍了使用HTML / CSS包含浮动元素的正确方法？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

说我有以下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>

这会显示为：

什么是正确的CSS方式使容器（红边框）完全围绕浮绿边框？

What's the proper CSS way to have the container (red-bordered box) completely surround the floaty green-bordered boxes?

推荐答案

向容器添加 overflow：auto

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

，并找到。

这篇关于使用HTML / CSS包含浮动元素的正确方法？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！