首页 > 分享 > CSS清除float浮动的常用几种方法

CSS清除float浮动的常用几种方法

花匠小妙招
2025-11-06 22:35

一、关于float浮动及其产生

在网页布局排版中我们会经常用到float元素，float定义元素往哪个方向浮动，使元素脱离文档流，按照指定方向发生移动，遇到父级边界或者相邻的浮动元素停了下来。它有四个属性值：

none （默认值，元素不浮动，并会显示在其在文本中出现的位置）。

left （元素向左浮动）。

right （元素向右浮动）。

inherit （规定应该从父元素继承 float 属性的值）。

先来看看浮动的效果，为了让两个块级元素并排显示，我们使用了float属性

<head> <meta charset="UTF-8"> <title>浮动</title> <style> body>div{width:500px;border: 2px solid red} .div1{width: 100px;height: 100px;background-color: blue;float: left} .div2{width: 100px;height: 100px;background-color: yellow; float: left} </style> </head> <body> <div > <div class="div1">我是div1</div> <div class="div2">我是div2</div> </div> </body>

效果：

div1和div2都是向左浮动，达到了我们并排排列的效果但是我们也看到了float也产生了很多副作用：父元素边框塌陷，

背景不能显示、不能设置padding和margin等等。所以这就是我们要学习消除浮动影响的原因。

二、消除浮动的方法

1.clear清除法

在浮动元素后面添加一个空的div。

<head> <meta charset="UTF-8"> <title>浮动</title> <style> body>div{width:500px;border: 2px solid red} .div1{width: 100px;height: 100px;background-color: blue;float: left} .div2{width: 100px;height: 100px;background-color: yellow; float: left} .empty{clear: both;} </style> </head> <body> <div > <div class="div1">我是div1</div> <div class="div2">我是div2</div> <div class="empty"></div> </div> </body>

效果：

2.给父元素设置高度

在css中父div中加height：200px；效果为：

这个方法是最简单的，但是会导致我们代码的扩展性变差，因为我们的子元素一旦变化父元素也要变化，这样就变得很不灵活了，所以在项目中我们不一般不用这种方法。

3.让父元素也浮动

在父元素div中加float：left；但是这种方法的缺点是要给每一个父元素都加float比较麻烦，如果父元素多的话那就更麻烦了，同时浮动多了容易出问题，所以一般也不推荐这种方法。

4.overflow：hidden

这个方法非常简单方便，在父元素中加overflow：hidden；(body>div{width:500px;border: 2px solid red;overflow: hidden;})这样可以解决边框塌陷的问题，但是要注意这个方法在下拉列表框场景下会遇到新的问题，并且还要考虑浏览器的兼容问题。

5.after伪类清除法

这个方法是最好的，就出了写法稍微麻烦一点点，没有什么副作用。写法如下：

.father:after{ /*father是指浮动div元素的父元素*/

content：''; /*把father类后面的添加元素设置为空*/

display：block； /*把添加元素的内容设置为block块级元素*/

clear：both； /*清除这个元素两边的浮动

}

下面来看我们上面的代码用after伪类清除，同样达到了我们的目的：

<style> body>div{width:500px;border: 2px solid red;} body div:after{ content: ''; display: block; clear: both; } .div1{width: 100px;height: 100px;background-color: blue;float: left} .div2{width: 100px;height: 100px;background-color: yellow; float: left} </style> </head> <body> <div > <div class="div1">我是div1</div> <div class="div2">我是div2</div> </div> </body>