清除浮动的几种解决方式？

定义

消除浮动元素之间的影响。

为什么非得要求元素有高度？？？

浮动元素的父元素没有高度！！！
没有高度会导致下面的布局错乱!

so 就要给高度！！！

 .clearfix::after {
      content: "";
      display: block;
      height: 0;
      clear: both;
      }

  谁没高度给谁加(因为子元素浮动导致父元素没高度)

此问题叫作：高度塌陷

父元素中所有的子元素都浮动后，父元素没有设置高度，则高度为0。

在标准文档流中，父元素的高度默认是由内容的高度撑开的。也就是说，子元素的最大高度就是父元素的高度。但是当子元素都浮动后，子元素就脱离了标准文档流，无法撑开父盒子，对于父盒子来说，它里面没有标准文档流的内容，则导致它没有高度。

解决方法

1.添加高度（不推荐）

原因：在网页中，父元素一般不设置高度，而是由内容去撑开高度，如果设置了高度，可能会出现底部有大片的留白或者内容溢出。

2.父元素设置浮动（不推荐）

父元素浮动会对后面的元素造成影响。

3.overflow：hidden；（推荐，一般）

给父元素设置

overflow：hidden；

缺点:父元素中的内容变多时，如果有超出父元素的地方，会被隐藏。

4.插入空标签，设置clear：both（不推荐）

clear是清除的意思，clear属性是用来清除浮动造成的影响。

clear：left、right、both （三种）
/** 
left：清除元素左边的浮动影响
right：清除元素右边的浮动影响
both：清除元素两边的浮动影响
*/

1. 在父元素的最后添加一个空标签
2. 空标签的宽、高都设置为0，设置clear：both；

缺点：

会多出一个毫无意义的空标签。

如果页面中很多地方都需要清除浮动，那么使用该方法，就会多出很多毫无意义的空标签，对于HTML页面来说不方便维护和管理。

5.伪元素设置clear：both（推荐，常用）

伪元素：顾名思义，不是一个真正的元素。HTML中没有对应的元素，不过其所有的用法与行为都与真正的页面元素一样。

使用方法：

元素::before / after{
     content: "伪元素的内容";
}

伪元素其实是伪类选择器的一种，伪类是用 ：hover ：active

为了区分伪元素与伪类，一般伪元素使用：：

   ::after 在元素的内部最后面添加一个内容
   ::before 在元素的内部最前面添加一个内容
   content属性是必填项。它决定了伪元素的内容。

**【注意】**伪元素添加的标签默认是行内元素。

    .clearfix::after{
        /* content内容可以为空，但是该属性是必写的。 */
      content: "";
      /* clear:both; 必须写在块级元素下才可以生效。 */
      clear: both;
      display: block;
    }

【面试注意点】

问：常用的清除浮动的方式？

错误回答：添加一个clearfix类名。

正确回答：通过伪元素添加一个空标签，content设置为空，将伪元素设置为块级元素，再添加属性clear：both。