CSS丨为什么要清除浮动以及清除浮动影响的几种方式

首先，任何元素浮动以后都会成为一个块级元素且脱离默认文档流（不完全脱离，会占据文本流位置，但不占据元素流位置），这就会造成一种现象，其父元素的“高度塌陷”，所以我们要清除浮动，那么清除浮动的方法有如下几种：
1、使用空标签来清除浮动，在所有浮动的标签后面添加一个空标签，定义 CSS 样式为 clear:both; 弊端就是增加了无意义的空标签。
2、给包含浮动元素的父级标签添加 CSS 属性 overflow：

#parent{
    overflow:auto;
    zoom:1; //兼容IE 6 浏览器
}

3、可以同时浮动其父级元素。
4、使用 after、before 伪类来清除浮动，给其父元素添加如下样式：

#parent:after,#parent:before{
    content: "";
    display: block;
    height: 0;
    clear: both;
    visibility:hidden;
}