1. 首页
  2. CSS

清除浮动的几种方式

清除浮动:根据情况需要来清楚浮动 。清除浮动的目的: 就是为了解决 父 盒子高度为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://www.linstudy.com/article/41.html