CSS中清除浮动的方案

文章类型:CSS

发布者:hp

发布时间:2022-09-05

在实际开发中，会遇到高度坍塌的问题，或者使用浮动的时候，会导致内容溢出到容器外面，导致页面布局破坏，所以需要清除浮动。

clear清除浮动 : clear:left 清除左侧浮动元素； clear:right 清除右侧浮动元素; clear:both 清除左右两边; clear:none 不清除

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
		#box{
			border: 1px solid red;
		}
		#box1{
			width: 100px;
			height: 100px;
			background: gainsboro;
			float: left;
		}
		</style>
	</head>
	<body >
		<div id="box">
			<div id="box1"></div>
		</div>
		
	</body>
</html>

高度会坍塌

解决方案一：额外标签法

<div id="box">
			<div id="box1"></div>
			<div style="clear: both;"></div>
		</div>

通过添加一个标签,clear:both会把前边元素中设有浮动属性的元素，当做没设浮动一样来看待，以此来消除其对自己的影响。

解决方案二：父元素添加样式形成BFC

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

添加样式使其父元素成为块级元素，解决高度坍塌

解决方案三：使用after伪元素清除浮动

	#box:after{
			display: block;
			content: '';
			height: 0;
			clear:both;
		}
#box{
			*zoom: 1; //兼容ie
		}

解决方案四：使用before和after双伪元素清除浮动

#box:before,#box:after{
	display: table;
			content: '';
		}
		#box:after{
			clear: both;
		}
		#box{
			*zoom: 1; //兼容ie
		}

解决方案五：手动为父元素添加高度

#box{
			width: 100%;
			height: 100px;
			border: 1px solid red;
			
			/* overflow: hidden; */
		}

解决方案六：添加换行标签

<br clear="all"/>

解决方案七：父元素跟着浮动

#box{
			width: 100%;
			
			border: 1px solid red;
			float: left;
			/* overflow: hidden; */
		}

解决方案八：父元素设置样式为table

#box{
			width: 100%;
			display: table;
			border: 1px solid red;
			/* float: left; */
			/* overflow: hidden; */
		}

上一篇ES6中set和map的区别

下一篇TS中的抽象类