css 完美清除浮动的两种解决方案

当一个元素实现浮动后，其父元素可能会失去高度，造成布局混乱，而清除浮动则是指清除浮动元素对父元素造成的影响，使其能正常显示。下面介绍两种常用的清除浮动方法。

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

步骤一：给浮动元素的父元素添加clearfix类

<div class="parent clearfix">
  <div class="float-left"></div>
  <div class="float-left"></div>
</div>

步骤二：定义clearfix类

.clearfix::before,
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}
.clearfix {
  zoom: 1;
}

• 示例一：放置在浮动元素后的空元素`

<style>
.clearfix::before,
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}
.clearfix {
  zoom: 1;
}
.float-left{
  width: 50%;
  height: 50px;
  float: left;
  background-color: #ccc;
}
</style>
<div class="parent1 clearfix">
  <div class="float-left">Content1</div>
  <div class="float-left">Content2</div>
  <div style="clear:both;"></div>
</div>

• 示例二：利用伪元素清除浮动

<style>
.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
}
.clearfix {
  *zoom: 1;
}
.float-left{
  width: 50%;
  height: 50px;
  float: left;
  background-color: #ccc;
}
</style>
<div class="parent2 clearfix">
  <div class="float-left">Content1</div>
  <div class="float-left">Content2</div>
</div>

方法二：使用overflow属性清除浮动

步骤一：给浮动元素的父元素定义overflow属性

<div class="parent" style="overflow: auto;">
  <div class="float-left"></div>
  <div class="float-left"></div>
</div>

• 示例三：

<style>
.parent3 {
  width: 200px;
  height: 200px;
  border: solid 1px #ccc;
  overflow: auto;
}
.float-left{
  width: 50%;
  height: 50px;
  float: left;
  background-color: #ccc;
}
</style>
<div class="parent3">
  <div class="float-left">Content1</div>
  <div class="float-left">Content2</div>
</div>

无论采取哪种方法，都能够清除浮动，具体应根据场景需求选择合适的方案。