css清除浮动的几种方法

在CSS中，浮动元素是经常使用的一种布局方式，但是浮动元素也可能会导致父元素高度塌陷、子元素溢出等问题，因此需要使用清除浮动的方法。

下面介绍几种实用的清除浮动的方法：

一、使用clear属性

clear属性可以设置一个元素的浮动状态，它有以下几个取值：

立即学习“前端免费学习笔记（深入）”；

1. clear：none （默认值）表示元素不清除浮动；
2. clear：left 表示元素下方不允许存在左侧浮动元素，即清除左浮动；
3. clear：right 表示元素下方不允许存在右侧浮动元素，即清除右浮动；
4. clear：both 表示元素下方不允许存在任何浮动元素，即同时清除左右浮动；

例如：下面的代码实现了一个清除浮动的效果：

<p class="parent">  <p class="child left"></p>  <p class="child right"></p>  <p style="clear:both;"></p></p>

在上述代码中，我们给最后一行添加了一个空的p标签，然后设置其样式的clear属性值为both，由于该元素没有设置宽度和高度，它只是个空标签，所以不会影响页面布局，但是它可以清除浮动效果。

改进一下上述代码，可以将空p标签抽象为一个类，代码如下：

<p class="parent">  <p class="child left"></p>  <p class="child right"></p>  <p class="clear"></p></p>

.clear {  clear: both;  height: 0;  overflow: hidden;}

在上述代码中，我们通过样式为clear类添加height: 0; overflow: hidden; 隐藏了这个空p标签，使其不会影响页面布局。

二、使用伪元素

在CSS3中，使用伪元素可以清除浮动效果，如下所示：

.clearfix:after {  content: '';  display: table;  clear: both;}

在上述代码中，我们给父元素添加了一个clearfix类，并使用伪元素:after来清除浮动效果，通过设置content: ''; display: table;和 clear: both; 实现清除浮动效果。

三、使用overflow属性

将父元素的overflow属性设置为hidden、auto或scroll也可以清除浮动，如下所示：

.parent {  overflow: hidden;}.parent {  overflow: auto;}.parent {  overflow: scroll;}