天天看点
返回

css清除浮动的方法汇总

浮动在css中是非常重要但也是引起很多莫名问题的罪魁祸首，所以我们对它可谓又爱又恨。

下面是我总结的几种清除浮动的方式（其中第一种是最常用的方式，很多大型网站都用到过）：

提醒读者：全文所有的实例代码都只有些微几行不同，为了让读者更清楚理解才在每个例子中都展现了完整代码。

清除浮动方式一：父级div定义伪类:after 结合使用zoom兼容低版本IE 

<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>清除浮动方式一：父级div定义伪类:after结合使用zoom兼容低版本IE</title>
    <style type="text/css"> 
    *{
        margin:0;
        padding: 0;
    }
    .div1{background:#000080;}
    .div2{background:#800080;height:100px;}
    .left{float:left;width:20%;height:200px;background:#DDD}
    .right{float:right;width:30%;height:80px;background:#DDD}
    /*清除浮动代码*/ 
    .clearfloat:after{display:block;clear:both;content:"";visibility:hidden;height:0} 
    .clearfloat{zoom:1}
</style> 
</head>
<body>
    <div class="div1 clearfloat"> 
        <div class="left">Left</div> 
        <div class="right">Right</div> 
    </div>
    <div class="div2">
        div2
    </div>
</body>
</html>

原理：IE8以上和非IE浏览器才支持:after。zoom(IE专有属性)可解决ie6,ie7浮动问题。

优点：浏览器支持好，不容易出现怪问题。

缺点：代码多，不少初学者不理解原理，要两句代码结合使用，才能让主流浏览器都支持。

建议：推荐使用，建议定义公共类，以减少CSS代码

在文章最后还会在再次详细解释这个方法，因为这是比较重要的一个清楚浮动方法。

清除浮动方式二:添加额外标签 

<!DOCTYPE html>
<html >
<head>
	<meta charset="UTF-8">
	<title>清除浮动方式二:添加额外标签</title>
	<style type="text/css"> 
		*{
			margin:0;
			padding: 0;
		}
	   .div1{background:#000080;}
	   .div2{background:#800080;height:100px;}
	   .left{float:left;width:20%;height:200px;background:#DDD}
	   .right{float:right;width:30%;height:80px;background:#DDD}


	   /*清除浮动代码*/ 
	   .clearfloat{clear:both};
   </style> 
</head>
<body>
	<div class="div1 clearfloat"> 
		<div class="left">Left</div> 
		<div class="right">Right</div> 
		<div class="clearfloat"></div>
		<!-- <br class="clearfloat"> -->
	</div>
	<div class="div2">
	    div2
	</div>
</body>
</html>

原理：通过在浮动元素末尾添加一个空的标签例如 <div></div>，其他标签br等亦可。

优点：通俗易懂，容易掌握。

缺点：添加很多无意义的空标签，在后期维护时将会非常麻烦。

建议：不推荐使用。尽管它是以前主要使用的一种清除浮动方法。

清除浮动方式三:父级添加overflow:hidden 

<!DOCTYPE html>
<html >
<head>
	<meta charset="UTF-8">
	<title>清除浮动方式三:父级添加overflow:hidden</title>
	<style type="text/css"> 
		*{
			margin:0;
			padding: 0;
		}
	   .div1{background:#000080;/*解决代码*/overflow:hidden;*zoom:1;}
	   .div2{background:#800080;height:100px;}
	   .left{float:left;width:20%;height:200px;background:#DDD}
	   .right{float:right;width:30%;height:80px;background:#DDD}
   </style> 
</head>
<body>
	<div class="div1 clearfloat"> 
		<div class="left">Left</div> 
		<div class="right">Right</div> 
	</div>
	<div class="div2">
	    div2
	 </div>
</body>
</html>

原理：必须定义width或zoom:1来兼容低版本IE，同时不能定义height。

优点：简单，代码少，浏览器支持好。

缺点：1.内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。

   2.不能和position配合使用.

建议：只推荐没有使用position或对overflow:hidden理解比较深的朋友使用.

清除浮动方式四:父级添加overflow:auto 

<!DOCTYPE html>
<html >
<head>
	<meta charset="UTF-8">
	<title>清除浮动方式四:父级添加overflow:auto</title>
	<style type="text/css"> 
		*{
			margin:0;
			padding: 0;
		}
	   .div1{background:#000080;/*解决代码*/overflow:auto;*zoom:1;}
	   .div2{background:#800080;height:100px;}
	   .left{float:left;width:20%;height:200px;background:#DDD}
	   .right{float:right;width:30%;height:80px;background:#DDD}
   </style> 
</head>
<body>
	<div class="div1 clearfloat"> 
		<div class="left">Left</div> 
		<div class="right">Right</div> 
	</div>
	<div class="div2">
	    div2
	 </div>
</body>
</html>

原理：必须定义width或zoom:1来兼容低版本IE，同时不能定义height。

优点：简单，代码少，浏览器支持好。

缺点：内部宽高超过父级div时，会出现滚动条。

建议：不推荐使用.

清除浮动方式五：父级手动定义高度 

<!DOCTYPE html>
<html >
<head>
	<meta charset="UTF-8">
	<title>清除浮动方式五：父级手动定义高度</title>
	<style type="text/css"> 
		*{
			margin:0;
			padding: 0;
		}
	   .div1{background:#000080;/*解决代码*/height:200px;}
	   .div2{background:#800080;height:100px;}
	   .left{float:left;width:20%;height:200px;background:#DDD}
	   .right{float:right;width:30%;height:80px;background:#DDD}
   </style> 
</head>
<body>
	<div class="div1 clearfloat"> 
		<div class="left">Left</div> 
		<div class="right">Right</div> 
	</div>
	<div class="div2">
	    div2
	 </div>
</body>
</html>

原理：父级div手动定义height，就解决了父级div无法自动获取到高度的问题。

优点：简单，代码少，容易掌握

缺点：只适合高度固定的布局，要给出精确的高度，如果高度和父级div不一样时，会产生问题

建议：不推荐使用，只建议高度固定的布局时使用。

清除浮动方式六：父级元素也浮动 

<!DOCTYPE html>
<html >
<head>
	<meta charset="UTF-8">
	<title>清除浮动方式六：父级元素也浮动</title>
	<style type="text/css"> 
		*{
			margin:0;
			padding: 0;
		}
	   .div1{background:#000080;/*解决代码*/float: left;width:100%;}
	   .div2{background:#800080;height:100px;/*解决代码*/clear:both;}
	   .left{float:left;width:20%;height:200px;background:#DDD}
	   .right{float:right;width:30%;height:80px;background:#DDD}
   </style> 
</head>
<body>
	<div class="div1 clearfloat"> 
		<div class="left">Left</div> 
		<div class="right">Right</div> 
	</div>
	<div class="div2">
	    div2
	 </div>
</body>
</html>

原理 ：所有代码一起浮动，变成了一个整体。注意，需要在父级元素指定width。

优点：不存在结构和语义化问题。

缺点：会产生新的浮动问题。

建议：不推荐使用，只作了解。

清除浮动方式七：父级div定义display:table 

<!DOCTYPE html>
<html >
<head>
	<meta charset="UTF-8">
	<title>清除浮动方式七：父级div定义display:table</title>
	<style type="text/css"> 
		*{
			margin:0;
			padding: 0;
		}
	   .div1{background:#000080;/*解决代码*/display: table;width: 100%;}
	   .div2{background:#800080;height:100px;}
	   .left{float:left;width:20%;height:200px;background:#DDD}
	   .right{float:right;width:30%;height:80px;background:#DDD}
   </style> 
</head>
<body>
	<div class="div1 clearfloat"> 
		<div class="left">Left</div> 
		<div class="right">Right</div> 
	</div>
	<div class="div2">
	    div2
	 </div>
</body>
</html>

原理：所有代码一起浮动，变成了一个整体。注意，需要在父级元素指定width。

优点：结构语义化完全正确。

缺点：盒模型属性已经改变，由此造成的一系列问题，得不偿失。

建议：不推荐使用。

最后在详细讲解一下第一种（after伪类）方式。

.clearfix:after {content:""; display:block; height:0; visibility:hidden; clear:both; } 
.clearfix { *zoom:1; }

1) display:block  使生成的元素以块级元素显示,占满剩余空间; 

2) height:0  避免生成内容破坏原有布局的高度。 

3) visibility:hidden  使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互; 

4）通过 content:"."生成内容作为最后一个元素，至于content里面是点还是其他都是可以的，当然也可以为空。

5）*zoom：1  兼容低版本IE。 

其实。 除了clear：both用来清除浮动的，其他代码无非都是为了隐藏掉content生成的内容，这也就是其他这个方式清除浮动为什么会有font-size：0，line-height：0。（after伪类清除浮动方式的其他写法）

相对于空标签闭合浮动的方法这个方法的代码似乎还是有些冗余，通过查询发现Unicode字符里有一个“零宽度空格”，也就是U+200B ，这个字符本身是不可见的，所以我们完全可以省略掉 visibility:hidden了 。于是有个简介点的写法：

.clearfix:after {content:"\200B"; display:block; height:0; clear:both; } 
.clearfix { *zoom:1; }.
css 清除浮动 方法汇总
上一篇: CSS清除浮动总结
下一篇: CSS 清除浮动的N种方式为什么要清除浮动清除浮动的几种方法

继续阅读