清除浮动的三种方法

Sixology.

于 2019-11-27 18:12:03 发布

阅读量159

点赞数

分类专栏：前端学习

本文链接：https://blog.csdn.net/qq_44685099/article/details/103280490

版权

前端学习专栏收录该内容

8 篇文章 2 订阅

订阅专栏

当父盒子没有定义高度，嵌套的盒子浮动之后，下边的元素发生位置错误
首先我们理解一下清除浮动的意思，清除浮动是清除浮动带来的不利影响，并不是清除浮动的效果，盒子还是正常浮动，
清除浮动的方法
clear：left；
clear：right；
clear：both；

1、额外标签法清除浮动

先来一个html文件

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	.header,.main,.footer{
		width: 500px;

	}
	.header{
		height: 100px;
		background: #000;
	}
	.main{
		
		background: #eee;
		margin: 10px 0;
	}
	.content{
		width: 300px;
		height: 300px;
		background: orange;
		float: left;
	}
	.sidebar{
		width: 190px;
		height: 300px;
		background: green;
		float: right;
	}
	.footer{
		height: 100px;
		background: #000;
	}
	</style>
</head>
<body>
	<div class="header"></div>
	<div class="main">
		<div class="content"></di>
		<div class="sidebar"></div>
		<!-- 额外标签法 -->
		<div style="clear:both"></div> 
	</div>
	<div class="footer"></div>
</body>
</html>

额外标签法就是在最后一个浮动元素后添加标签，但是在使用过程中不是很好用，当元素过多的时候就需要添加很多额外标签，所以一般不用

2、overflow清除浮动

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	.header,.main,.footer{
		width: 500px;

	}
	.header{
		height: 100px;
		background: #000;
	}
	.main{
		background: #eee;
		margin: 10px 0;
		overflow:hidden;
		/*给父级元素设置overflow*/
	}
	.content{
		width: 300px;
		height: 300px;
		background: orange;
		float: left;
	}
	.sidebar{
		width: 190px;
		height: 300px;
		background: green;
		float: right;
	}
	.footer{
		height: 100px;
		background: #000;
	}
	</style>
</head>
<body>
	<div class="header"></div>
	<div class="main">
		<div class="content"></div>
		<div class="sidebar"></div>
	</div>
	<div class="footer"></div>
</body>
</html>

overflow的方法就是给父元素的overflow的值设置成hidden，但是有一个弊端，当有内容出了盒子，出了盒子的内容就会被裁掉，所以不能用

3、伪元素清除浮动

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	.header,.main,.footer{
		width: 500px;
	}
	.header{
		height: 100px;
		background: #000;
	}
	.main{
		
		background: #eee;
		margin: 10px 0;
	}
	.content{
		width: 300px;
		height: 300px;
		background: orange;
		float: left;
	}
	.sidebar{
		width: 190px;
		height: 300px;
		background: green;
		float: right;
	}
	.footer{
		height: 100px;
		background: #000;
	}
	/*伪元素清除浮动 推荐使用*/
	.clearfix:after{
		content: ".";
		display: block;
		height: 0;
		line-height: 0;
		visibility: hidden;
		clear: both;
	}
	 /*兼容ie*/ 
	.clearfix{
		zoom:1;
	}
	</style>
</head>
<body>
	<div class="header"></div>
	<div class="main clearfix">
	<!-- 给父元素设置一个伪类元素 -->
		<div class="content"></div>
		<div class="sidebar"></div>
	</div>
	<div class="footer"></div>
</body>
</html>