南宁企业oa系统开发,挑战百日学习计划第48天（float清除浮动方法）

本文链接：https://blog.csdn.net/zkelm/article/details/109713066

南宁oa系统开发定制：http://www.nasiot.com

南宁企业oa系统开发定制
如图所示，当元素浮动的情况之下，父级元素就会高度坍塌，解决的方法有两种主流模式，我这里做简单的介绍
1.使用clear：both 清楚浮动：即在浮动元素的末端清除元素浮动

<html>
	<head>
		<meta charset="utf-8">
		<title>Span元素</title>
		<style>
			img{
				max-width: 100px;
			}
			.box{				
				border:1px solid #f55;	
			    
			}
			ul{
				list-style: none;
			}
			li{float:left;}
						
			.clear{
				clear:both;
			}
		</style>
	</head>
	<body>
		<div class="box ">
		<ul>
		<li><img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1029847769,1364060861&fm=26&gp=0.jpg"></li>
		<li><img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1029847769,1364060861&fm=26&gp=0.jpg"></li>
		<div class="clear"></div>
		</ul>
	</body>
</html>

广西oa系统开发定制
重点来了
为了代码的美观，所以一般的办法就是使用：伪类after在元素的尾部追加一个空的内容，并用于清除浮动

.clearclass:after{
  display:block;
  content:"";
  clear:both;
}

然后把这个类加入在父元素之中即可，这样子就解决坍塌问题，
代码如下

<html>
	<head>
		<meta charset="utf-8">
		<title>Span元素</title>
		<style>
			img{
				max-width: 100px;
			}
			.box{				
				border:1px solid #f55;	
			    
			}
			ul{
				list-style: none;
			}
			li{float:left;}
						
			.clearclass::after{
				content: "";
				display: block;
				clear:both;				
			}
		</style>
	</head>
	<body>
		<div class="box clearclass">
		<ul>
		<li><img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1029847769,1364060861&fm=26&gp=0.jpg"></li>
		<li ><img src="https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1029847769,1364060861&fm=26&gp=0.jpg"></li>
		
		</ul>
	</body>
</html>

方法2：父级元素，使用overflow：hidden；即可解决问题 bfc什么的，浮动元素也计算高度

.box{				
				border:1px solid #f55;	
			    overflow:hidden;
			}

好了，教程就到这里，大家一起学习加油！

广西企业oa系统开发定制：www.nasiot.com