极客教程什么是CSS中的浮动包含？
在开始本教程之前，首先了解什么是浮动包含。因此，浮动包含是一种在CSS中用于控制网页元素布局的技术。
每当我们为任何HTML元素设置’float’属性时，它会自动从网页的原始文档流中移除，但它仍然保留在视口中。因此，开发人员可能会面临问题，例如父div元素不根据子div元素的尺寸扩展。让我们通过以下示例来了解它。
示例
在下面的示例中，我们有一个包含文本和“child” div元素的“parent” div元素。在这里，我们没有为父div元素设置宽度。
此外，我们已为child div元素设置固定尺寸并添加了’float：left’ CSS属性，以使其可浮动在左侧。在输出中，用户可以观察到，父div未根据child 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>使用<i>浮动CSS属性</i>设置浮动元素</h2>
<div class = "parent">
<p> 这是一个随机文本。 </p>
<div class = "child"> </div>
</div>
<div class="parent">
<p> 这是一个随机文本。 </p>
<div class = "child"> </div>
</div>
</body>
</html>
为解决上述问题，我们可以使用以下技术。
使用CSS的Contain属性
‘Contain’ CSS属性将特定元素及其后代元素从文档流中移除，使它们独立。当我们为任何HTML元素设置“float”CSS属性时，它会从文档中删除。因此，我们还可以使用“contain”CSS属性将父元素从文档流中删除，以修复浮动元素的布局。
语法
用户应按照以下语法使用“Contain”CSS属性。
parent {
contain: content
}
在上述语法中，父选择器选择为我们设置了“float”CSS属性的特定元素的父元素。
示例
在下面的示例中，我们采取与第一个示例相同的代码。在这里，我们将“contain：content” CSS属性添加到“parent” div元素中。
在输出中，用户可以观察到子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>在使用<i>浮动CSS属性</i>设置浮动元素时，使用<i>包含CSS属性</i> </h2>
<div class = "parent">
<p> 欢迎来到TutorialsPoint！。 </p>
<div class = "child"> </div>
</div>
<div class = "parent">
<p> 嗨！你怎么样？ </p>
<div class = "child"> </div>
</div>
</body>
</html>
使用CSS的Overflow属性
CSS的“overflow”属性控制特定HTML元素的溢出。当我们将“overflow”属性的值设置为“auto”时，当元素内容开始溢出时，它会使HTML元素可滚动。
语法
用户可以按照以下语法使用“overflow: auto” CSS属性作为浮动包含。
selector {
overflow: auto;
}
示例
在下面的示例中，我们创建了一个包含“text”和“image” div元素的“card” div。我们为image div元素设置了“float：left”，为card元素设置了“overflow：auto”。
在输出中，用户可以观察到图像完全适合卡片元素中。如果我们删除“overflow”属性，则会从div元素中溢出。
<html>
<head>
<style>
.card {
border: 2px dotted pink;
width: 300px;
margin: 5px;
overflow: auto;
}
.image {float: left;}
</style>
</head>
<body>
<h2>在使用<i>浮动CSS属性</i>设置浮动元素时，使用<i>overflow: auto CSS属性</i> </h2>
<div class = "card">
<div class = "text"> 我喜欢大自然！ </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’ CSS属性在网页上创建网格布局。在这里，我们可以为一些HTML内容设置’float’ CSS属性。之后，我们可以使用’display：grid’和’grid-template-columns：1fr 1fr’ CSS属性创建两列。
基本上，它在网格布局中设置浮动元素，帮助开发人员修复网页布局。
语法
用户可以按照以下语法使用“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>使用'display: grid' CSS属性设置浮动元素</h2>
<div class = "container">
<div class = "float-left"> 这是左列 </div>
<div class = "float-right"> 这是右列 </div>
</div>
</body>
</html>
在本教程中，用户学习了各种浮动元素的包含技术。在第一种技术中，我们使用了’contain’ CSS属性。在第二种技术中，我们使用了’overflow’属性，在第三种技术中，我们使用了’display: grid’ CSS属性。