为什么要清除浮动？
1.由于父盒子很多情况下，不方便给高度，但是子盒子浮动又不占有位置，最后父级盒子高度为0时，就会影响下面的标准流盒子。
-
由于浮动元素不再占用原文档流的位置，所有它会对后面的元素排版产生影响，
-
因为浮动元素脱离了普通流，会出现一种高度坍塌的现象：原来的父容器高度是内部元素撑开的，但是当内部元素浮动后，脱离普通流浮动起来，那父容器的高度就坍塌，变为高度0px。 2. 清除浮动本质
-
清除浮动的本质是清除浮动元素造成的影响
-
如果父盒子本身有高度，则不需要清除浮动
-
清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了。
1.给父元素设置高度
- 优点：简单粗暴，方便
- 缺点：有些布局不能固定父元素。
2.额外标签法
- 1，在父元素内容的最后添一个块级元素；
- 2，给添加的块级元素设置 clear:both;
- 优点:通俗易懂.书写方便
W3C推荐. - 缺点:添加无意义的标签,让页面的HTML结构变得复杂.
3.双伪元素清除法(父级添加)
- 双伪元素清除浮动：
.clearfix::before, .clearfix::after { content: ''; display: table; } .clearfix::after { clear: both; }
4.单伪元素清除法(父级添加)
- 单伪元素清除浮动的代码：
.clearfix::after { content: ''; display: block; clear: both; visibility: hidden; height: 0; }
5.给父元素设置overflow : hidden
- 直接给父元素设置 overflow : hidden;方便简洁.
