DIV设置浮动后无法撑开外部DIV的解决办法

DIV设置浮动后无法撑开外部DIV的解决办法，是前端开发中常见的问题。下面我会给出一个完整的攻略，包含以下几个部分：

DIV设置浮动后无法撑开外部DIV的解决办法，是前端开发中常见的问题。下面我会给出一个完整的攻略，包含以下几个部分：

1. 了解问题背景
2. 利用clearfix解决问题
3. 利用伪元素解决问题

了解问题背景

在前端开发中，我们通常会使用CSS中的float属性设置元素浮动。但是，当一个元素设置了浮动后，其父元素的高度会无法被撑开。这会导致在父元素中垂直居中或者水平居中的内容无法正常排版，并且可能会影响页面的整体布局。

例如，下面的代码中，我们设置了一个父元素和两个子元素。其中一个子元素设置了浮动，另一个子元素则希望在父元素中水平和垂直居中。但是由于浮动元素无法撑开父元素的高度，导致另一个子元素无法正常居中：

<div class="container">
  <div class="float-box"></div>
  <div class="center-box"></div>
</div>

.float-box {
  float: left;
  width: 50px;
  height: 50px;
  background-color: red;
}

.center-box {
  width: 100px;
  height: 100px;
  background-color: blue;
  margin: auto;
}

利用clearfix解决问题

clearfix是用于清除浮动元素造成父元素高度无法自动撑开的问题的一种技术。它可以让父元素包含浮动元素时自动适应高度，从而解决页面布局中的很多问题。

clearfix的实现有多种方法，其中一种常见的方法是在父元素中添加一个空白DIV，并设置其清除浮动的属性。

例如，我们可以在上面的示例中添加一个clearfix类，然后在其样式中添加如下内容：

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

这样就可以通过在父元素中添加clearfix类，使其自动适应子元素的高度，从而解决浮动元素无法撑开父元素的问题。

完整的代码如下：

<div class="container clearfix">
  <div class="float-box"></div>
  <div class="center-box"></div>
</div>

.float-box {
  float: left;
  width: 50px;
  height: 50px;
  background-color: red;
}

.center-box {
  width: 100px;
  height: 100px;
  background-color: blue;
  margin: auto;
}

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

利用伪元素解决问题

除了使用clearfix外，我们也可以使用CSS的伪元素来解决浮动元素无法撑开父元素的问题。具体做法是在父元素中添加一个伪元素，然后设置其高度为0，清除浮动，并在父元素中设置overflow属性为hidden。

例如，我们可以在上面的示例中添加一个clearfix类，然后在其样式中添加如下内容：

.container::after {
  content: "";
  display: block;
  visibility: hidden;
  height: 0;
  clear: both;
}

.container {
  overflow: hidden;
}

这样就可以通过在父元素中添加伪元素，设置其高度为0并清除浮动，从而解决浮动元素无法撑开父元素的问题。

完整的代码如下：

<div class="container">
  <div class="float-box"></div>
  <div class="center-box"></div>
</div>

.float-box {
  float: left;
  width: 50px;
  height: 50px;
  background-color: red;
}

.center-box {
  width: 100px;
  height: 100px;
  background-color: blue;
  margin: auto;
}

.container::after {
  content: "";
  display: block;
  visibility: hidden;
  height: 0;
  clear: both;
}

.container {
  overflow: hidden;
}

以上就是解决DIV设置浮动后无法撑开外部DIV的解决办法的完整攻略。