为什么清除浮动

浮动会给元素带来一定的不良效果，清除浮动就是为了清除浮动带来的不良效果。

方法

1.结尾处加空div标签 clear:both

原理：先添加一个空div，再利用clear:both清除浮动，让父级div能自动获取到高度（添加span等inline标签无效）
缺点：如果页面浮动布局多，就要增加很多空div，让人感觉很不好

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css"> 
			.box{
				background: red;
			}
			/* 左边的div*/
			.left{
		        background: blue;
		        /*设置左浮动*/
		        float: left;
		    	height: 100px;width:40%;
			}
			/* 右边的div*/
			.right{
		    	background: pink;
		    	/*设置右浮动*/
		    	float: right; 
		    	height: 100px;width:50%;
			}
			/*清除浮动*/
			.clear{
				clear: both;
			}
			/* 最后一个div*/
			.footer{
				background: orange;height: 50px;
			}
		</style> 
	</head>
	<body>
		<div class="box"> 
			  <div class="left">Left</div> 
			  <div class="right">Right</div> 			 
			  <div class="clear"></div>       <!--添加这个空div，通过调用clear 用来清除浮动的-->
		</div> 
		<div class="footer"> </div>
	</body>
</html>

2.父级元素添加伪元素:after 和 zoom

原理：IE8以上和非IE浏览器才支持:after，原理和方法2有点类似，zoom(IE转有属性)可解决ie6,ie7浮动问题
优点：浏览器支持好、不容易出现怪问题（目前：大型网站都有使用，如：腾迅，网易，新浪等等）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css"> 
			.box{
				background: red;
				width: 800px;
				margin: 0 auto;
			}
			/* 左边的div*/
			.left{
		        background: blue;
		        /*设置左浮动*/
		        float: left;
		    	height: 100px;
		    	width:40%;
			}
			/* 右边的div*/
			.right{
		    	background: pink;
		    	/*设置右浮动*/
		    	float: right; 
		    	height: 100px;
		    	width:50%;
			}
			/* 最后一个div*/
			.footer{
				background: orange;
				width: 800px;
				height: 50px;
				margin: 0 auto;
				}
			/*清除浮动代码*/
			.clearfix:after{
				display:block;
				clear:both;
				content:"";
				visibility:
				hidden;height:0;
				}
			.clearfix{
				/* IE6 7 专有*/
				zoom:1;
				}
		</style> 
	</head>
	<body>
		<div class="box clearfix">   <!-- 在这个父级元素 调用伪类清楚浮动 -->
			  <div class="left">Left</div> 
			  <div class="right">Right</div> 
		</div> 
		<div class="footer"> </div>
	</body>
</html>

3.父级元素添加双伪元素:before,:after 和 zoom

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css"> 
			.box{
				background: red;
				width: 800px;
				margin: 0 auto;
			}
			/* 左边的div*/
			.left{
		        background: blue;
		        /*设置左浮动*/
		        float: left;
		    	height: 100px;
		    	width:40%;
			}
			/* 右边的div*/
			.right{
		    	background: pink;
		    	/*设置右浮动*/
		    	float: right; 
		    	height: 100px;
		    	width:50%;
			}
			/* 最后一个div*/
			.footer{
				background: orange;
				width: 800px;
				height: 50px;
				margin: 0 auto;
				}
			/*清除浮动代码*/
			.clearfix:before,.clearfix:after{
			   content:"";
			   display:table;
			}
			.clearfix:after{
			  clear:both;
			}
			.clearfix{
			  *zoom:1;
			}
		</style> 
	</head>
	<body>
		<div class="box clearfix">   <!-- 在这个父级元素 调用伪类清楚浮动 -->
			  <div class="left">Left</div> 
			  <div class="right">Right</div> 
		</div> 
		<div class="footer"> </div>
	</body>
</html>

4.父级元素添加 display:table

原理：将div属性变成表格
缺点：会产生新的未知问题。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css"> 
			.box{
				background: red;
				width: 800px;
				margin: 0 auto;
				display:table;   /* 在父元素设置这个可以清除浮动*/
			}
			/* 左边的div*/
			.left{
		        background: blue;
		        /*设置左浮动*/
		        float: left;
		    	height: 100px;
		    	width:40%;
			}
			/* 右边的div*/
			.right{
		    	background: pink;
		    	/*设置右浮动*/
		    	float: right; 
		    	height: 100px;
		    	width:50%;
			}
			/* 最后一个div*/
			.footer{
				background: orange;
				width: 800px;
				height: 50px;
				margin: 0 auto;
			}
		</style> 
	</head>
	<body>
		<div class="box"> 
			  <div class="left">Left</div> 
			  <div class="right">Right</div> 
		</div> 
		<div class="footer"> </div>
	</body>
</html>

5.父级元素添加 overflow:hidden

原理：必须定义width或zoom:1,同时不能定义height，使用overflow:hidden/auto时，浏览器会自动检查浮动区域的高度.
缺点：
（1）overflow:hidden:不能和position一起用，因为超出的尺寸的会被隐藏。
（2）overflow:auto:内部宽高超过父级div时，会出现滚动条。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css"> 
			.box{
				background: red;
				width: 800px;
				margin: 0 auto;
				overflow:hidden    /* 在父元素设置这个可以清除浮动*/
			}
			/* 左边的div*/
			.left{
		        background: blue;
		        /*设置左浮动*/
		        float: left;
		    	height: 100px;
		    	width:40%;
			}
			/* 右边的div*/
			.right{
		    	background: pink;
		    	/*设置右浮动*/
		    	float: right; 
		    	height: 100px;
		    	width:50%;
			}
			/* 最后一个div*/
			.footer{
				background: orange;
				width: 800px;
				height: 50px;
				margin: 0 auto;
			}
		</style> 
	</head>
	<body>
		<div class="box"> 
			  <div class="left">Left</div> 
			  <div class="right">Right</div> 
		</div> 
		<div class="footer"> </div>
	</body>
</html>

6.父级元素添加 height

原理：手动设置父级div的height，解决了父级div无法自动获取高度的问题。
缺点：只适合高度固定的布局，如果高度和父级div不一样时，会产生问题

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css"> 
			.box{
				background: red;
				width: 800px;
				margin: 0 auto;
				height: 100px;  /* 在父元素 设置高度就不会出现浮动带来的不良效果*/
			}
			/* 左边的div*/
			.left{
		        background: blue;
		        /*设置左浮动*/
		        float: left;
		    	height: 100px;
		    	width:40%;
			}
			/* 右边的div*/
			.right{
		    	background: pink;
		    	/*设置右浮动*/
		    	float: right; 
		    	height: 100px;
		    	width:50%;
			}
			/* 最后一个div*/
			.footer{
				background: orange;
				width: 800px;
				height: 50px;
				margin: 0 auto;
			}
		</style> 
	</head>
	<body>
		<div class="box"> 
			  <div class="left">Left</div> 
			  <div class="right">Right</div> 
		</div> 
		<div class="footer"> </div>
	</body>
</html>

posted on 2020-12-19 23:25 风趣阅读(63) 评论(0) 收藏举报

刷新页面返回顶部