数据结构
网络
关系数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会学
服装设计
法学什么是 CSS 中的浮动容器 (Float Containment)？
首先，让我们在开始本教程之前了解浮动容器。浮动容器是一种在 CSS 中用于控制网页元素布局的技术。
每当我们为任何 HTML 元素设置“float”属性时，它都会自动从网页的原始文档流中移除，但它仍然保留在视口中。因此，开发人员可能会遇到诸如父 div 元素不会根据子 div 元素的尺寸进行扩展之类的问题。让我们通过下面的示例来了解它。
示例
在下面的示例中，我们有一个包含文本和“子”div 元素的“父”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 属性的特定元素的父元素。
示例
在下面的示例中，我们使用了与第一个示例相同的代码。在这里，我们向“父”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 的 overflow 属性
CSS 的“overflow”属性控制特定 HTML 元素的溢出。当我们将“auto”值设置为“overflow”属性时，当元素的内容开始溢出时，它会使 HTML 元素可滚动。
语法
用户可以遵循以下语法将“overflow: auto”CSS 属性用作浮动容器。
selector {
overflow: auto;
}
示例
在下面的示例中，我们创建了“card”div，其中包含“text”和“image”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>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”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>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 属性。
浏览量：118
