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

一、关于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>

效果：

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

2.给父元素设置高度

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

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

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

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>

效果：

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

三、总结

在实际项目中我是比较推荐最后两种方法，当然清除浮动的方法还有很多，我们可以自由选择使用哪一种，只要最后能达到我们的目标并不出现其他问题就可以。本人只是罗列了我认为常见的清除浮动的方法，肯定还有其他方法，欢迎大家补充。

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

相关推荐