什么是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属性。