子Div使用Float后撑开父Div的几种方法

下面是子Div使用Float后撑开父Div的几种方法的详细讲解。首先，我们先来看一下使用Float属性对子元素进行布局时可能会遇到的问题。

当我们为子Div设置了Float属性后，子Div会脱离文档流，父Div的高度会失效，导致父Div无法完全包含所有的子元素。这时，我们就需要对父Div进行特殊处理，以保证它能够正确地包含子元素。

方法一：使用伪元素清除浮动

这是最常见的一种方法，也是比较简单的一种方法。具体实现方式如下：

.parent::after {
  content: "";
  display: block;
  clear: both;
}

我们在父Div上添加一个伪元素::after，并设置它的content属性为""（空字符），即不显示任何内容，在样式中设置为block元素，并使用clear属性清除浮动，这样就能够实现父Div自适应高度，从而正确地包含所有子元素。

下面是一个示例：

<style>
.parent {
  border: 1px solid gray;
  padding: 10px;
}

.child {
  float: left;
  width: 200px;
  height: 100px;
  border: 1px solid black;
}
</style>

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

这段代码中，我们创建了一个父Div，并为其中嵌套了三个子Div，每个子Div设置了float: left属性。如果不进行特殊处理，父Div将无法正确地包含这些子Div。我们接下来将使用伪元素清除浮动的方法来解决这个问题。

<style>
.parent {
  border: 1px solid gray;
  padding: 10px;
}

.child {
  float: left;
  width: 200px;
  height: 100px;
  border: 1px solid black;
}

.parent::after {
  content: "";
  display: block;
  clear: both;
}
</style>

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

我们在父Div的样式中添加了一个::after伪元素，并设置它的display属性为block，以便在正常流中占据一行的空间。接着，我们为伪元素的content属性设置了""，以不显示任何内容。最后，我们使用clear属性清除浮动，从而使父Div正确地包含了所有子Div。

方法二：父Div同样设置Float属性

如果父Div不想添加伪元素或者想让父Div内的元素都在同一行展现，则可以将父Div也设置为float。具体实现方式如下：

.parent {
  float: left;
}

我们在另一篇文章中曾经提到过这种方法，即通过为父子元素都设置Float属性来解决子Div撑开父Div的问题。这种方法也比较简单，但是需要注意的是，在这种情况下，父Div的宽度可能会受到影响，需要手动设置宽度，以保证正确的布局效果。

下面是一个示例：

<style>
.parent {
  float: left;
  width: 100%;
  border: 1px solid gray;
  padding: 10px;
}

.child {
  float: left;
  width: 200px;
  height: 100px;
  border: 1px solid black;
}
</style>

<div class="parent">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

这段代码中，我们为父Div设置了float: left属性，并手动设置了宽度为100%。为了方便展示，我们为所有子Div设置了相同的宽度和高度。最终的效果是，所有子Div都在同一行排列，且父Div能够正确地包含它们。

以上是两种使用Float属性布局时撑开父Div的常用方法，可以根据实际需求进行选择。