CSS清除浮动的四种方法

 

 

前言

浮动能实现网页排版布局,但是同样也会给网页带来一定的问题(父盒子高度塌陷),下面我们就整理一下几种清楚浮动的方法


 

一、父盒子设置固定高度清除浮动

缺点:使用不灵活,后期不易维护

例:     

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>清除浮动</title>
	<style type="text/css">
		.father{
            /*父盒子设置固定高度*/
			height: 100px;
			border: 1px solid red;
		}
		.child{
			width: 100px;
			height: 100px;
			float: left;
			background-color: green;
		}
	</style>
</head>
<body>
	<div class="father">
		<div class="child">child</div>
	</div>

</body>
</html>

二、内墙法清除浮动

在浮动元素的后面加一个空的块级元素(通常是div),设置该元素clear:both;属性。

缺点:结构冗余

例:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>清除浮动</title>
	<style type="text/css">
		.father{
			border: 1px solid red;
		}
		.child{
			width: 100px;
			height: 100px;
			float: left;
			background-color: green;
		}
		.clearfix{
			clear: both;
		}
	</style>
</head>
<body>
	<div class="father">
		<div class="child">child</div>
		<div class="clearfix"></div>
	</div>

</body>
</html>

三、伪元素清除浮动

 

延续内墙法,利用伪元素清除浮动

例:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>清除浮动</title>
	<style type="text/css">
		.father{
			border: 1px solid red;
		}
		.child{
			width: 100px;
			height: 100px;
			float: left;
			background-color: green;
		}
		.cleafix:after{
			content:'.';
			display: block;
			clear: both;
			overflow: hidden;
			height: 0;
		}
		
	</style>
</head>
<body>
	<div class="father clearfix">
		<div class="child">child</div>
	</div>

</body>
</html>

四、overflow: hidden

 

overflow: hidden;会形成一个BFC区域,浮动和清除浮动智慧应用到当前BFC区域,

浮动不会影响其它BFC中元素的布局,而清除浮动只能清除同一BFC中在它前面的元素的浮动

例:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>清除浮动</title>
	<style type="text/css">
		.father{
			overflow: hidden;
			border: 1px solid red;
		}
		.child{
			width: 100px;
			height: 100px;
			float: left;
			background-color: green;
		}
		
	</style>
</head>
<body>
	<div class="father">
		<div class="child">child</div>
	</div>

</body>
</html>

 

 


总结

第四种最简便,根据情况选择使用第三第四种

©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页