总结清除浮动的几种方法

时间 2019-11-30

标签总结清除浮动几种方法繁體版

原文原文链接

不少时候咱们在写网页布局的时候会常常遇到各类问题，而浮动问题就是常见问题之一，因此今天总结一下清除浮动的几种方法。html

清除浮动是每个前端工程师必须掌握的技能。前端

浮动会使元素对象提高半层，同时会影响到先后标签的位置，并且一样的代码，在各类浏览器中显示效果也有多是不相同的，这样清除浮动就更难了。清除浮动方法有不少种，但有的方法在浏览器兼容性方面还有问题。chrome

方法一：给父集div加上高度

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>Examples</title>
	<style>
		.box {background: blue;border: 1px solid black;height:150px;/*解决方案*/}
		.box div {width: 150px;height: 150px;float: left;}
		.box1 {background: pink;}
		.box2 {background: green;}
	</style>
</head>
	<body>
	    <div class="box">
	    	<div class="box1"></div>
	    	<div class="box2"></div>
	    </div>
	</body>
</html>
复制代码

原理：给父集div加上高度属性，就能够解决父集div没法获取高度的问题。浏览器

优势：简单，代码少。bash

缺点：只适合高度固定布局，若是须要高度自适应，这种方法就无法作到了前端工程师

建议：不建议使用，若是高度能够定死的状况下，方才能够使用。布局

方法二：在浮动元素的同级末尾加空标签(clear:both)

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>Examples</title>
	<style>
		.box {background: blue;border: 1px solid black;}
		.box .box1,.box .box2 {width: 150px;height: 150px;}
		.box1 {background: pink;float: left;}
		.box2 {background: green;float: left;}
		.clear{clear:both;}/* 解决方案 */
	</style>
</head>
	<body>
	    <div class="box">
	    	<div class="box1"></div>
	    	<div class="box2"></div>
			<div class="clear"></div>
	    </div>
	</body>
</html>
复制代码

原理：在末尾加上空标签，而且让它清除左右浮动，这样父集div就能够获取到高度了性能

优势：简单，代码少，全兼容。flex

缺点：影响性能，每次清浮动都有加div，总归让人有点不愉快。ui

建议：不建议使用，反正我历来不用这个方法。

方法三：利用伪类选择器来清浮动(:after,:before)

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>Examples</title>
	<style>
		.box {background: blue;border: 1px solid black;}
		.box .box1,.box .box2 {width: 150px;height: 150px;}
		.box1 {background: pink;float: left;}
		.box2 {background: green;float: left;}
		/* 解决方案 */
		.clearfix:after,.clearfix:before {
			content:"";
			clear:both;
			display:block;
			width:0px;
			height:0px;
			visibility: hidden;
		}
		.clearfix {
			zoom: 1;
		}
	</style>
</head>
	<body>
	    <div class="box clearfix">
	    	<div class="box1"></div>
	    	<div class="box2"></div>
	    </div>
	</body>
</html>
复制代码

原理：这个方法方法跟第二个方法有点像，只是after,before是用来假装元素的。

优势：用法简单，全兼容。

缺点：这个方法没有什么缺点

建议：强烈建议使用此方法！！！

方法四：给浮动的父亲加上overflow

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>Examples</title>
	<style>
	    /* 或者使用overflow: auto */
		.box {background: blue;border: 1px solid black;overflow: hidden;}
		.box .box1,.box .box2 {width: 150px;height: 150px;}
		.box1 {background: pink;float: left;}
		.box2 {background: green;float: left;}
	</style>
</head>
	<body>
	    <div class="box">
	    	<div class="box1"></div>
	    	<div class="box2"></div>
	    </div>
	</body>
</html>
复制代码

原理：利用overflow属性会建立BFC来清除浮动的。

优势：用法简单。

缺点：超出元素对象后，会被隐藏

建议：此方法看状况而用

方法四：给浮动的父亲加上dispaly:inline-block

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>Examples</title>
	<style>
		.box {background: blue;border: 1px solid black;display: inline-block}
		.box .box1,.box .box2 {width: 150px;height: 150px;}
		.box1 {background: pink;float: left;}
		.box2 {background: green;float: left;}

	</style>
</head>
	<body>
	    <div class="box">
	    	<div class="box1"></div>
	    	<div class="box2"></div>
	    </div>
	</body>
</html>
复制代码

原理：利用display:inline-block属性会建立BFC来清除浮动的。

优势：用法简单。

缺点：把父亲变成了内联块元素了

建议：此方法看状况而用

其余不常见方法

如下方法都是给父集加的

display为inline-block,table-cell,table-caption,flex,inine-flex

position为absolute或fixed

overflow不为visible

float属性不为none

原理：都是经过给父集建立BFC的原理来清浮动的

缺点：每一个属性都有每一个属性的特性。

建议：看状况而使用，当你不知道用什么方法清除的时候，就利用伪类来请浮动。