清除浮动的方法总结

最新推荐文章于 2024-07-07 19:48:42 发布

玐也很可爱呀

最新推荐文章于 2024-07-07 19:48:42 发布

阅读量107

点赞数

文章标签： css 清除浮动

本文链接：https://blog.csdn.net/qq_41339975/article/details/102475620

版权

方法一：给父元素添加高度

<!DOCTYPE html>
<html>
<head>
	<title>清除浮动的几种方法</title>
	<style type="text/css">
		.div1{
			background:#000080;
			border:1px solid red;
			height: 400px;
		}
   
   		.left{
   			float:left;
   			width:20%;
   			height:200px;
   			background:#DDD
   		}
   		.right{
   			float:right;
   			width:30%;
   			height:80px;
   			background:#DDD
   		}

	</style>
</head>
<body>
	<div class="div1"> 
		<div class="left">Left</div> 
		<div class="right">Right</div>
	</div>
</body>
</html>

方法二：在结尾处添加空的div添加样式clear:both

<!DOCTYPE html>
<html>
<head>
	<title>清除浮动的几种方法</title>
	<style type="text/css">
		.div1{
			background:#000080;
			border:1px solid red;
		}
   
   		.left{
   			float:left;
   			width:20%;
   			height:200px;
   			background:#DDD
   		}
   		.right{
   			float:right;
   			width:30%;
   			height:80px;
   			background:#DDD}
   
	   /*清除浮动代码*/
	   .clearfloat{
	    clear:both
	   }
	</style>
</head>
<body>
	<div class="div1"> 
		<div class="left">Left</div> 
		<div class="right">Right</div>
		<div class="clearfloat"></div>
	</div>
</body>
</html>

方法三：给父元素添加overflow:hidden/auto

<!DOCTYPE html>
<html>
<head>
	<title>清除浮动的几种方法</title>
	<style type="text/css">
		.div1{
			background:#000080;
			border:1px solid red;
			overflow: auto;
		}
   
   		.left{
   			float:left;
   			width:20%;
   			height:200px;
   			background:#DDD
   		}
   		.right{
   			float:right;
   			width:30%;
   			height:80px;
   			background:#DDD
   		}
	</style>
</head>
<body>
	<div class="div1"> 
		<div class="left">Left</div> 
		<div class="right">Right</div>
		<div class="clearfloat"></div>
	</div>
</body>
</html>

方法四：给父元素div添加伪元素after,zoom

<!DOCTYPE html>
<html>
<head>
	<title>清除浮动的几种方法</title>
	<style type="text/css">
		.div1{
			background:#000080;
			border:1px solid red;
		}
   
   		.left{
   			float:left;
   			width:20%;
   			height:200px;
   			background:#DDD
   		}
   		.right{
   			float:right;
   			width:30%;
   			height:80px;
   			background:#DDD
   		}
   		.clearFloat {
   			zoom:1;
   		}
   		.clearFloat:after{
   			display: block;
   			clear: both;
   			content: "";
   			height: 0;
   		}
	</style>
</head>
<body>
	<div class="div1 clearFloat"> 
		<div class="left">Left</div> 
		<div class="right">Right</div>
	</div>
</body>
</html>

玐也很可爱呀

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
清除浮动的方法总结

方法一：给父元素添加高度<!DOCTYPE html><html><head> <title>清除浮动的几种方法</title> <style type="text/css"> .div1{ background:#000080; border:1px solid red; height: 40...
复制链接

扫一扫