CSS 中的浮动限制是什么?
在开始本教程之前，我们先来了解一下浮动限制。浮动限制是 CSS 中用于控制网页元素布局的一项技术。
每当我们为任何 HTML 元素设置"float"属性时，它都会自动从网页的原始文档流中移除，但仍保留在视口中。因此，开发者可能会遇到诸如父 div 元素未根据子 div 元素的尺寸进行扩展之类的问题。让我们通过以下示例来理解这个问题。
示例
在下面的示例中，我们有一个包含文本的"父"div 元素和"子"div 元素。这里，我们没有设置父 div 元素的宽度。
此外，我们为子 div 元素设置了固定尺寸，并添加了 CSS 属性"float: left"，使其可以浮动在左侧。在输出中，用户可以观察到父 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 属性时，该元素将从文档中移除。因此，我们还可以使用 CSS 属性"contain"从文档流中移除父元素，以修复浮动元素的布局。
语法
用户应遵循以下语法来使用"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 元素将可滚动。
语法
用户可以按照以下语法将 CSS 属性"overflow: auto"用作浮动容器。
selector {
overflow: auto;
}
示例
在下面的示例中，我们创建了"card"div，其中包含"text"和"image"div 元素。我们为图片 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"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>
在本教程中，用户学习了各种浮动控制技巧。在第一种技巧中，我们使用了 CSS 属性"contain"。在第二种技巧中，我们使用了 CSS 属性"overflow";在第三种技巧中，我们使用了 CSS 属性"display: grid"。
相关文章
有用资源
css 参考教程 - 该教程包含有关 css 的更多信息:https://www.cainiaomax.com/css/
