css四种清除浮动方式

1、额外标签法

原因：子元素都是浮动的情况下，父元素因为没有高度设置，
所以必然会塌陷为高度0，此时可以用空盒子clear:both来清除浮动

.clear {
clear: both;
}

添加的盒子必须是块元素，不能是行内元素，且写在在父级元素的子级元素内容的最后。

<div class="clear">
</div>

2、给父级添加overflow: hidden;

overflow: hidden;

3、伪类清除浮动

::after是在父级元素的内容元素后添加，认清::after是给父级元素添加

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

认识::after伪元素，在h1内容前后添加内容

h1::before {
	content: '我';
	color: crimson;
	text-shadow: 10px 10px 20px rgba(236, 51, 51, 0.775);
}

h1::after {
	content: '大哥大';
	color: crimson;
	text-shadow: 10px 10px 20px rgba(36, 245, 82, 0.522);
}

<h1>是</h1>

4、双伪类清除浮动

只是多了after，display:table为块元素，因为添加的盒子必须是块元素，不能是行内元素

.clearfix:before,
.clearfix:after {
	content: "";
	display: table;
}
.clearfix:after {
	clear: both;
}
.clearfix {
	zoom: 1;
/* 照顾I6I7浏览器不兼容问题 */
}