那些年我们一起清除的浮动

最新推荐文章于 2022-11-24 11:37:35 发布

Clover_hxt

最新推荐文章于 2022-11-24 11:37:35 发布

阅读量584

点赞数

分类专栏： *CSS

本文链接：https://blog.csdn.net/huxiaotong12/article/details/46890633

版权

*CSS 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

方法一：:after

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.warp {
			border: 1px solid blue;
			width: 600px;
			margin: 30px auto 5px;
			background: #F5F5F5;
		}
		.main {
			height: 60px;
			width: 50%;
			background: #FFE3D7;
		}
		.side {
			width: 20%;
			background: lightblue;
		}
		.left{ float: left;}
		/*清除浮动一：*/
		.clearfix:after {
			clear: both;
			content: ".";
			display: block;
			height: 0;
			visibility: hidden;
		}
	</style>
</head>
<body>
	<div class="warp clearfix" id="floa7">
		<div class="main left">.main：warp自己闭合浮动了，所以footer不用再清除浮动了(float:left)</div>
		<div class="side left">.side：我也浮动了(float:left)</div>
	</div>
</body>
</html>

为了创建跨浏览器兼容的同样的盒模型布局，我们可以把原来的清除浮动的方法改良一下，采用伪类:before 和 :after：
.clearfix:before,
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
}
.clearfix:after {clear: both;}
.clearfix {zoom: 1;} /* IE < 8 */

需要注意的是 :after是伪元素（Pseudo-Element），不是伪类（某些CSS手册里面称之为“伪对象”），很多闭合浮动大全之类的文章都称之为伪类，不过csser要严谨一点，这是一种态度。

由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。

该方法源自于: How To Clear Floats Without Structural Markup

原文全部代码如下:

<style type="text/css">  .clearfix:after {  content: "."; display: block; height: 0; clear: both; visibility: hidden;  }   .clearfix {display: inline-block;}  /* for IE/Mac */   </style> <!--[if IE]> <style type="text/css"> .clearfix {zoom: 1;/* triggers hasLayout */  display: block;/* resets display for IE/Win */} </style>  <![endif]-->  鉴于 IE/Mac的市场占有率极低,我们直接忽略掉,最后精简的代码如下:

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

.clearfix { *zoom:1; }

优雅的 Demo

优点：结构和语义化完全正确,代码量居中

缺点：复用方式不当会造成代码量增加

方法二：添加额外标签

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.warp {
			border: 1px solid blue;
			width: 600px;
			margin: 30px auto 5px;
			background: #F5F5F5;
		}
		.main {
			height: 60px;
			width: 50%;
			background: #FFE3D7;
		}
		.side {
			width: 20%;
			background: lightblue;
		}
		.left{ float: left;}
	</style>
</head>
<body>
	<div class="warp" id="float1">
		<h3>1）添加额外标签</h3>
		<div class="main left">.main{float:left;}</div>
		<div class="side left">.side{float:right;}</div>
		<div style="clear:both;"></div>
	</div>
</body>
</html>

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

缺点：可以想象通过此方法，会添加多少无意义的空标签，有违结构与表现的分离，在后期维护中将是噩梦，这是坚决不能忍受的，所以你看了这篇文章之后还是建议不要用了吧。

方法三：使用br标签和其自身的 html属性

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.warp {
			border: 1px solid blue;
			width: 600px;
			margin: 30px auto 5px;
			background: #F5F5F5;
		}
		.main {
			height: 60px;
			width: 50%;
			background: #FFE3D7;
		}
		.side {
			width: 20%;
			background: lightblue;
		}
		.left{ float: left;}
	</style>
</head>
<body>
	<div class="warp" id="float2">
		<h3>2）使用 br标签和其自身的 html属性</h3>
		<div class="main left">.main{float:left;}</div>
		<div class="side left">.side{float:right;}</div>
		<br clear="all">
	</div>
</body>
</html>

优点：比空标签方式语义稍强，代码量较少

缺点：同样有违结构与表现的分离，不推荐使用

方法四：给父元素设置overflow：hidden

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div {
			padding: 15px 20px;
			font-size: 14px;
			color: #333;
		}
		.warp {
			border: 1px solid blue;
			width: 600px;
			margin: 30px auto 5px;
			background: #F5F5F5;
		}
		.main {
			height: 60px;
			width: 50%;
			background: #FFE3D7;
		}
		.side {
			width: 20%;
			background: lightblue;
		}
		.left{ float: left;}
	</style>
</head>
<body>
	<div class="warp" id="float3" style="overflow:hidden; *zoom:1;">
		<h3>3)父元素设置 overflow：hidden</h3>
		<div class="main left">.main{float:left;}</div>
		<div class="side left">.side{float:right;}</div>
	</div>
</body>
</html>

优点：不存在结构和语义化问题，代码量极少

缺点：内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素；04年POPO就发现overflow:hidden会导致中键失效，这是我作为一个多标签浏览控所不能接受的。所以还是不要使用了

方法五：给父元素设置display：table

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		div {
			padding: 15px 20px;
			font-size: 14px;
			color: #333;
		}
		.warp {
			border: 1px solid blue;
			width: 600px;
			margin: 30px auto 5px;
			background: #F5F5F5;
		}
		.main {
			height: 60px;
			width: 50%;
			background: #FFE3D7;
		}
		.side {
			width: 20%;
			background: lightblue;
		}
		.left{ float: left;}
	</style>
</head>
<body>
	<div class="warp" id="float6" style="display:table;">
		<h3>6）父元素设置display:table</h3>
		<div class="main left">.main{float:left;}</div>
		<div class="side left">.side{float:right;}</div>
	</div>
</body>
</html>

优点：结构语义化完全正确，代码量极少

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

4)父元素设置 overflow：auto 属性

同样IE6需要触发hasLayout，演示和3差不多

优点：不存在结构和语义化问题，代码量极少

缺点：多个嵌套后，firefox某些情况会造成内容全选；IE中 mouseover 造成宽度改变时会出现最外层模块有滚动条等，firefox早期版本会无故产生focus等, 请看嗷嗷的 Demo ,不要使用

5）父元素也设置浮动

优点：不存在结构和语义化问题，代码量极少

缺点：使得与父元素相邻的元素的布局会受到影响，不可能一直浮动到body，不推荐使用

Clover_hxt

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
那些年我们一起清除的浮动

方法一：clearfix Document .warp { border: 1px solid blue; width: 600px; margin: 30px auto 5px; background: #F5F5F5; } .main { height: 60px; width: 50%; background: #FFE
复制链接

扫一扫