一、什么是清除浮动

• 浮动引起的问题：高度塌陷。
• 高度塌陷
  • 在文档流中，父元素的高度默认被子元素撑开。但当子元素浮动时，子元素脱离文档流，就不再向父元素汇报高度，此时父元素高度丢失，页面布局会混乱，出现高度塌陷问题。
• 清除浮动就是为了解决高度塌陷问题，而解决高度塌陷问题的本质是让父元素在计算高度时，能够把浮动子元素的高度也计算进去。

/* 高度塌陷演示 */
.f1 {
      background-color: black;
      border: 2px solid red;
    }
.s1 {
      float: left;
      background-color: blue;
      height: 50px;
      width: 50px;
    }

二、解决方案

1. clear 解决

clear

• clear：用来清除其他浮动元素对当前元素的影响。
• clear 属性只能在块级元素上其作用。
• 可选值：none、left、right、both

解决方案

1. 给父元素设置固定的宽高。（扩展性不好。不推荐。）
2. 在父元素的最后加一个块级子元素，<div style="clear.both"></div> 。（增加了无意义标签，维护麻烦。违反了结构与样式分离的原则。不推荐。）
3. 在父元素的最后增加一个 br 标签，<br clear="all"> 。（增加了无意义标签，维护麻烦。违反了结构与样式分离的原则。不推荐。）
4. 给父元素增加 after 伪元素。

.clear-fix::after {
    content: "";
    display: block;
    clear: both;
    height: 0; /* 兼容旧浏览器 */
    visiability: hidden; /* 兼容旧浏览器 */
}

2. BFC 解决

• 什么是 BFC ?

  根据 W3C 标准，在页面中元素都有一个隐含的属性叫做 Block Formatting Context，简称BFC，该属性可以设置打开或者关闭，默认是关闭的。

• 元素开启 BFC 后的特性

  • 父元素的垂直外边距不会和子元素重叠
  • 开启 BFC 的元素不会被浮动元素所覆盖
  • 开启 BFC 的元素可以包含浮动的子元素

• 开启 BFC 的方式

  W3C 对 BFC 的定义如下： 浮动元素和绝对定位元素，非块级盒子的块级容器，以及 overflow 值不为 visiable 的块级盒子，都会为他们的内容创建新的 BFC。

  根据定义，可以总结出以下四种方式：

  • 设置元素浮动。
  • 设置元素绝对定位。
  • 设置元素为 inline-block 。
  • 将元素的 overflow 设置为一个非 visiable 的值。