极客笔记CSS 什么是浮动容器
在开始本教程之前，我们先了解一下浮动容器。浮动容器是CSS中用来控制网页元素布局的技术。
每当我们为任何HTML元素设置了’float’属性，它就会自动从网页的原始文档流中移除，但仍然在视口中存在。因此，开发人员可能会遇到问题，比如父div元素不根据子div元素的尺寸扩展。让我们通过下面的示例来理解。
示例
在下面的示例中，我们有一个包含文本和子div元素的’parent’ div元素。我们没有为父div元素设置宽度。
此外，我们为子div元素设置了固定尺寸，并添加了’float: left’的CSS属性，使其在左侧浮动。在输出中，用户可以观察到父div没有根据子div元素的高度扩展，因为它是浮动的。
<html>
<head>
<style>
.parent {
border: 2px dotted blue;
width: 300px;
margin: 5px;
}
.child {
width: 50px;
height: 50px;
float: left;
border: 4px solid green;
background: yellow;
}
</style>
</head>
<body>
<h2>Using the <i> float CSS property </i> to set floating elements</h2>
<div class = "parent">
<p> This is a random text. </p>
<div class = "child"> </div>
</div>
<div class="parent">
<p> This is a random text. </p>
<div class = "child"> </div>
</div>
</body>
</html>
为了解决上述问题，我们可以使用以下技术。
使用CSS的contain属性
“contain” CSS属性可以将特定元素及其子元素从文档流中移除，使它们独立。当我们为任何HTML元素设置“float” CSS属性时，它会被从文档中移除。因此，我们也可以使用“contain” CSS属性将父元素从文档流中移除，以修复浮动元素的布局问题。
语法
用户应遵循以下语法来使用“contain” CSS属性。
parent {
contain: content
}
在上述语法中，父选择器选择特定元素的父元素，我们已经设置了’float’ CSS属性。
示例
在下面的示例中，我们采用了与第一个示例中相同的代码。在这里，我们给’parent’ div元素添加了’contain: content’ CSS属性。
在输出中，用户可以观察到子div不再溢出，而是完全放在父div元素中。
<html>
<head>
<style>
.parent {
border: 2px dotted pink;
width: 300px;
margin: 5px;
contain: content;
}
.child {
width: 50px;
height: 50px;
float: left;
border: 4px solid blue;
background: red;
}
</style>
</head>
<body>
<h2>Using the <i> contain CSS proeprty with float </i> to set floating elements</h2>
<div class = "parent">
<p> Welcome to the TutorialsPoint!. </p>
<div class = "child"> </div>
</div>
<div class = "parent">
<p> Hi! How are you? </p>
<div class = "child"> </div>
</div>
</body>
</html>
使用CSS的溢出属性
CSS的’overflow’属性控制特定HTML元素的溢出。当我们将’overflow’属性的值设置为’auto’时，当元素的内容开始溢出时，它会使HTML元素可滚动。
语法
用户可以按照以下语法使用’overflow: auto’ CSS属性作为浮动容器。
selector {
overflow: auto;
}
示例
在下面的示例中，我们创建了一个名为“card”的div，其中包含“text”和“image” div元素。我们为image div元素设置了“float: left”，并为“card”元素设置了“overflow: auto”。
在输出中，用户可以观察到图像完美地适应了card元素。如果我们移除“overflow”属性，它将从div元素溢出。
<html>
<head>
<style>
.card {
border: 2px dotted pink;
width: 300px;
margin: 5px;
overflow: auto;
}
.image {float: left;}
</style>
</head>
<body>
<h2>Using the <i> overflow: auto CSS proeprty with float </i> to set floating elements</h2>
<div class = "card">
<div class = "text"> I love nature! </div>
<div class = "image"> <img src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT58C2HqvIjZnL-UlE0TxpLPf_l6O-h34EhvPABAEk8&s" alt = "image"> </div>
</div>
</script>
</body>
</html>
使用网格布局模块
我们可以使用CSS中的display: grid属性在网页中创建网格布局。在这里，我们可以为一些HTML内容设置floatCSS属性。之后，我们可以使用display: grid和grid-template-columns: 1fr 1frCSS属性创建两列。
基本上，它将浮动元素设置在网格布局中，帮助开发人员修复网页布局。
语法
用户可以按照以下语法使用display: grid来设置浮动元素。
.container {
display: grid;
grid-template-columns: 1fr 1fr;
}
在上面的语法中，用户可以通过更改“grid-template-columns”CSS属性的值来创建多个列。
示例
在下面的示例中，“container”div元素包含了“float-left”和“float-right”div元素。我们根据它们的类名设置了div元素的“float”属性值。
我们对“container”div元素使用了“display: grid”CSS属性。在输出中，用户可以观察到两个div元素是如何设置在容器中的。一个在左侧，另一个在右侧。
<html>
<head>
<style>
.container {
width: 400px;
height: 100px;
display: grid;
border: 3px solid green;
grid-template-columns: 1fr 1fr;
font-size: 2rem;
}
.float-left {float: left;}
.float-right {float: right;}
</style>
</head>
<body>
<h2>Using the <i> display: grid CSS property </i> to set floating elements</h2>
<div class = "container">
<div class = "float-left"> This is a Left Column </div>
<div class = "float-right"> This is a Right Column </div>
</div>
</body>
</html>
用户在本教程中学习了各种浮动内容的技术。在第一种技术中，我们使用了“contain” CSS属性。在第二种技术中，我们使用了“overflow”属性；在第三种技术中，我们使用了“display: grid” CSS属性。