# 清除浮动

高度塌陷

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

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

解决方法

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

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

使用方法：

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

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

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

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

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