清除浮动的几种常用方式_float: right; clear: both;-CSDN博客

本文链接：https://blog.csdn.net/qq_44537625/article/details/99945086

使用clear：both

//添加一个class，然后用clear：both
<div style="float:right"></div>
<div class="clearFloat"></div>
.clearFloat{
	clear:both;
}

使用overflow

//给浮动元素的父元素添加一个overflow：auto
//这样父盒子就不会应为子元素使用了浮动而不会被撑开

<html>  
	<head>
		<style type="text/css">
			#layout{
				overflow:auto;
				background:red;
			}
			#left{
				float:left;
				width:20%;
				height:200px;
				background:blue;
				line-height:200px;
			}
			#right{
				float:right;
				width:30%;
				height:80px;
				background:yellow;
				line-height:80px;
			}
		</style>
	</head>
	<body>
		<div id="layout">
			<div id="left">Left</div>
			<div id="right">Right</div>
		</div>
	</body>  
</html>

使用:after伪元素，


<html>  
	<head>    
	</head>    
	<body>    
		<div class="clearfix">    
			<div id="left">Left</div>    
			<div id="right">Right</div>    
		</div>    
			<style type="text/css">    
			.clearfix:after{
  				 content:".";/*加一段内容*/
  				 display:block;/*让生成的元素以块级元素显示，占满剩余空间*/
   				 height:0;/*避免生成的内容破坏原有布局高度*/
   				 clear:both;/*清除浮动*/
   				 visibility:hidden;/*让生成的内容不可见*/
 		 }

			#left{    
				float:left;    
				width:20%;    
				height:200px;    
				background:blue;    
				line-height:200px;    
			 }    
			#right{    
				float:right;    
				width:30%;    
				height:80px;    
				background:yellow;    
				line-height:80px;    
			}    
		</style>    
	</body>