清除浮动的4种方式

摘要：清除浮动：根据情况需要来清楚浮动。清除浮动的目的：就是为了解决父盒子高度为0 的问题。1.、额外标签法给浮动盒子的后面添加一个新的div；2、overflow:hidden 触发了bfc模式

清除浮动：根据情况需要来清楚浮动。清除浮动的目的：就是为了解决父盒子高度为0 的问题。

1.、额外标签法给浮动盒子的后面添加一个新的div

2、overflow:hidden 触发了bfc模式，就不用清除浮动了 bfc模式。

CSS2.1中规定满足下列CSS声明之一的元素便会生成BFC：

根元素
float的值不为none
overflow的值不为visible
display的值为inline-block、table-cell、table-caption
position的值为absolute或fixed

3、伪元素网易搜狐常用

.clearfix:after{
      content:””;
      visibility:hidden; 
      display:block;
      height:0;
      clear:both;
 }
.clearfix{  //IE6模式下
  zoom:1;
}

清除浮动：真正的叫法闭合浮动

4、双伪元素小米，淘宝常用

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<style type="text/css">
			.father {
				width: 600px;
				height: auto;
				border: 1px solid red;
			}
			.child1,.child2 {
				background: pink;
				width: 250px;
				height: 250px;
				float: left;
			}
			.clearfix:before,.clearfix:after {
				/真正意义上的闭合浮动/ display: table;
				content: "";
			}
			.clearfix:after {
				clear: both;
			}
			.clearfix {
				//IE6
				zoom: 1;
			}
		</style>
	</head>

	<body>
		<div>
			<div>哥哥</div>
			<div>妹妹</div>
		</div>
	</body>
</html>

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_4183