css怎样清除左右浮动-猿码集

1. 清除浮动的作用

在 CSS 的布局中，浮动是常见的一种方法，可以使元素脱离文档流，实现多列布局、图文混排等效果。但是，浮动元素会对其他的布局元素产生影响，不当使用会导致页面布局错乱。这时，清除浮动就成了必要的操作。

2. 清除浮动的方法

2.1 空标签法

这种方法比较常见，其主要思路是在浮动元素的父容器最后添加一个空 <div> 标签，并给其设置 clear:both; 属性来清除浮动。如下：


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

这里的 ::after 是一个 css 伪类，它会在元素的内部最后一个子元素之后插入一个虚拟元素。使用 content: ""; 来为此虚拟元素留出内容区域，然后将其转换为块级元素（display: block;），最后给它添加清除浮动的属性（clear: both;），从而达到清除浮动的效果。

2.2 overflow法

这种方法则是在浮动元素的父容器上添加 overflow:hidden; 或 overflow:auto; 属性，让其产生 BFC（块级格式化上下文），从而实现清除浮动的效果。


.parent {
    overflow: hidden;
}

2.3 父容器添加高度

这种方法则是在浮动元素的父容器上添加一个明确的高度值。但这种方法有个缺点就是需要预先知道浮动元素的高度，而且如果浮动元素的高度发生变化，父容器的高度也需要相应地修改。


.parent {
    height: 500px;
}

2.4 父容器使用伪类

这种方法与空标签法类似，只是它使用了 css 伪类来实现。在浮动元素的父容器上加上 .clearfix:before, .clearfix:after 两个伪类，并分别设置宽度为 0、高度为 0、溢出为 hidden、内容为 "" 等属性，最后使用 clear:both; 属性清除浮动。


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

2.5 BFC

BFC（块级格式化上下文）是 CSS 中一种盒模型的渲染模式。一个具有 BFC 属性的元素可以隔绝其内部的浮动元素和外部的元素，从而达到清除浮动的效果。比如可以使用 float: left; 和 display: inline-block; 来产生 BFC。

3. 避免造成浮动

以上是清除浮动的几种方法，但是，我们在布局时还要避免造成浮动，从而能更好地避免浮动问题。

3.1 使用 inline-block

inline-block 可以使多个块级元素在同一行内显示，不需要使用 float 浮动。如下构造了一个个并列的块级元素，其中每个元素有一个特定的宽度：


.box {
  display: inline-block;
  width: 200px;
  height: 200px;
  margin-right: 20px;
  background-color: #ddd;
}

3.2 使用 flex 布局

flex 布局是 CSS3 新增加的布局方式，它非常灵活，可以实现多种复杂的布局效果。使用 flex 布局可以方便地控制元素的排列方向、间距、对齐方式等属性。


.container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
}
.item {
  width: 30%;
  height: 200px;
  margin-bottom: 20px;
  background-color: #ddd;
}

3.3 table 布局

在某些情况下，表格是一种比较合适的布局方式。在使用 table 布局时，我们可以将要实现的内容看作是一张表格，然后使用表格的相关属性来调整布局。


.table {
  display: table;
  width: 100%;
  border-spacing: 10px;
}
.row {
  display: table-row;
}
.cell {
  display: table-cell;
  width: 30%;
  height: 200px;
  background-color: #ddd;
}

4. 总结

清除浮动对于页面布局是非常重要的操作，不仅可以避免一些常见的布局错误，还能让页面更加美观。本文介绍了几种清除浮动的方法，并且讲解了如何避免造成浮动。在实际项目中，我们可以根据自己的实际情况选择合适的方案。

css怎样清除左右浮动