清除浮动的六大方法

时间 2019-11-07

标签清除浮动六大方法繁體版

原文原文链接

清除浮动的六大方法

一.父元素固定高度

说明:css

这种方法适用于父元素的内容的高度固定的状况,若是父元素的内容有可能会变化则不适合使用此种方法

<!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

说明:html

clear属性表示清除浮动元素对本身的影响bash
clear属性有三个值,left,right,both,left表示清除本元素左边浮动元素本身的影响,right表示清除本元素右边浮动元素对本身的影响,both表示清除两边浮动元素对本身的影响,通常咱们使用both学习
该属性通常写在公共类中,使用时给须要的元素添加该类名便可ui
该方法有个致命的缺点就是:margin属性部分失效spa

<!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值部分失效,可使用隔墙法firefox

外隔墙code

说明:htm

定义一个空的盒子,该盒子样式中加上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>

复制代码

内隔墙string

说明:

定义一个空的盒子,该盒子样式中加上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;}   /* IE六、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>

复制代码