清除浮动的六大方法

ye空也晴朗
1,408 阅读5分钟

清除浮动的六大方法

一.父元素固定高度

说明:

  • 这种方法适用于父元素的内容的高度固定的情况,如果父元素的内容有可能会变化则不适合使用此种方法
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>清除浮动的六种方法</title>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			.wrap{
				height: 300px;/*固定父元素的高度*/
			}
			.box1,.box2{
				width: 400px;
				height: 300px;
				float: left;
			}
			.box1{
				background-color: yellow;
			}
			.box2{
				background-color: deepskyblue;
			}
			.box3{
				width: 900px;
				height: 200px;
				background-color: deeppink;
			}
		</style>
	</head>
	<body>
		<div class="wrap">
			<div class="box1"></div>
			<div class="box2"></div>
		</div>
		<div class="box3"></div>
	</body>
</html>

二.clear:both

说明:

  • clear属性表示清除浮动元素对自己的影响

  • clear属性有三个值,left,right,both,left表示清除本元素左边浮动元素自己的影响,right表示清除本元素右边浮动元素对自己的影响,both表示清除两边浮动元素对自己的影响,一般我们使用both

  • 该属性一般写在公共类中,使用时给需要的元素添加该类名即可

  • 该方法有个致命的缺点就是:margin属性部分失效

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>清除浮动的六种方法</title>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			.box1,.box2{
				width: 400px;
				height: 300px;
				float: left;
			}
			.box1{
				background-color: yellow;
			}
			.box2{
				background-color: deepskyblue;
			}
			.box3{
				width: 900px;
				height: 200px;
				clear: both;/*清除浮动*/
				background-color: deeppink;
			}
		</style>
	</head>
	<body>
		<div class="wrap">
			<div class="box1"></div>
			<div class="box2"></div>
		</div>
		<div class="box3"></div>
	</body>
</html>

三.隔墙法

clear:both直接加在想要清除影响的元素上会造成该元素margin值部分失效,可以使用隔墙法

外隔墙

说明:

  • 定义一个空的盒子,该盒子样式中加上clear:both
  • 将该空盒子放到想要清除影响的元素与浮动元素所在的父元素之间
  • 给该盒子添加样式时考虑公共类思想
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>清除浮动的六种方法</title>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			.box1,.box2{
				width: 400px;
				height: 300px;
				float: left;
			}
			.box1{
				background-color: yellow;
			}
			.box2{
				background-color: deepskyblue;
			}
			.box3{
				width: 900px;
				height: 200px;
				background-color: deeppink;
			}
			/*公共类*/
			.clearfix{
				clear: both;
			}
			.h20{
				height: 20px;
			}
		</style>
	</head>
	<body>
		<div class="wrap">
			<div class="box1"></div>
			<div class="box2"></div>
		</div>
		<div class="clearfix h20"></div>
		<div class="box3"></div>
	</body>
</html>

内隔墙

说明:

  • 定义一个空的盒子,该盒子样式中加上clear:both
  • 将该空盒子放到浮动元素的父元素里面
  • 给该盒子添加样式时考虑公共类思想
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>清除浮动的六种方法</title>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			.box1,.box2{
				width: 400px;
				height: 300px;
				float: left;
			}
			.box1{
				background-color: yellow;
			}
			.box2{
				background-color: deepskyblue;
			}
			.box3{
				width: 900px;
				height: 200px;
				background-color: deeppink;
			}
			/*公共类*/
			.clearfix{
				clear: both;
			}
			.h20{
				height: 20px;
			}
		</style>
	</head>
	<body>
		<div class="wrap">
			<div class="box1"></div>
			<div class="box2"></div>
			<div class="clearfix h20"></div>
		</div>
		<div class="box3"></div>
	</body>
</html>

四. overflow:hidden

说明:

  • 这是一种偏方法,原理暂时不清楚
  • 给浮动元素的父元素添加属性overflow:hidden
  • 此方法不兼容IE,要做兼容处理
  • 缺点:内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>清除浮动的六种方法</title>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			.wrap{
				overflow:hidden;
				_zoom:1;/*兼容ie6*/
			}
			.box1,.box2{
				width: 400px;
				height: 300px;
				float: left;
			}
			.box1{
				background-color: yellow;
			}
			.box2{
				background-color: deepskyblue;
			}
			.box3{
				width: 900px;
				height: 200px;
				background-color: deeppink;
			}
		</style>
	</head>
	<body>
		<div class="wrap">
			<div class="box1"></div>
			<div class="box2"></div>
		</div>
		<div class="box3"></div>
	</body>
</html>

五:使用after伪元素清除浮动

说明:

  • :after 方式为空元素的升级版，好处是不用单独加标签了
  • 对浮动元素父元素处理
  • 缺点： 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。
  • 注意： content:"." 里面尽量跟一个小点，或者其他，尽量不要为空，否则再firefox 7.0前的版本会有生成空格。
  • 大厂常用,值得学习
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>清除浮动的六种方法</title>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			.clearfix:after{/*建议以公共类的形式出现*/
				content: '.';
				display: block;
				height: 0;
				clear: both;
				visibility: hidden;
			}
			.clearfix {*zoom: 1;}   /* IE6、7 专有 */
			.box1,.box2{
				width: 400px;
				height: 300px;
				float: left;
			}
			.box1{
				background-color: yellow;
			}
			.box2{
				background-color: deepskyblue;
			}
			.box3{
				width: 900px;
				height: 200px;
				background-color: deeppink;
			}
			
		</style>
	</head>
	<body>
		<div class="wrap clearfix">
			<div class="box1"></div>
			<div class="box2"></div>
		</div>
		<div class="box3 "></div>
	</body>
</html>

六:使用before和after双伪元素清除浮动

说明:

  • 对浮动元素父元素处理
  • 优点： 代码更简洁
  • 缺点： 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。
  • 大厂常用,值得学习
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>清除浮动的六种方法</title>
		<style>
			*{
				padding: 0;
				margin: 0;
			}
			.clearfix:before,.clearfix:after { 
			    content:"";
			    display:table;
			}
			.clearfix:after {
			   clear:both;
			}
			.clearfix {
			    *zoom:1;/*ie6-7*/
			}
			.box1,.box2{
				width: 400px;
				height: 300px;
				float: left;
			}
			.box1{
				background-color: yellow;
			}
			.box2{
				background-color: deepskyblue;
			}
			.box3{
				width: 900px;
				height: 200px;
				background-color: deeppink;
			}
			
		</style>
	</head>
	<body>
		<div class="wrap clearfix">
			<div class="box1"></div>
			<div class="box2"></div>
		</div>
		<div class="box3 "></div>
	</body>
</html>
avatar
文章
阅读
粉丝