H5 清除浮动

1、为什么要清除浮动？
为了解决块级元素浮动后父元素塌陷问题。

2、为什么会产生 父元素塌陷？
首先父元素没有设置高度，父元素的高度是由子元素中最高的控件决定，撑开
简单可以这样理解，原本是在和父元素在同一层级上。当子元素浮动后，这样子元素会浮在父元素上面不在占据父元素的空间。原本是可以撑开父元素，结果就不在被撑开。

3、怎么解决父元素塌陷问题？
下面会使用例子的形式提供三种 解决父元素塌陷问题。

css 代码：

<style>/* 3. 清除浮动 */.clearfix:after {visibility: hidden;clear: both;display: block;content: ".";height: 0;}/* 清除浮动 *//* .clearfix {*zoom: 1;} */.father {width: 400px;border: 1px solid red;/* 1、解决父亲塌陷问题 直接给父元素设置  height *//* height: 100px; *//* 2、给父元素设置 float *//* float: left; */}.son {width: 100px;height: 100px;background-color: aqua;}/* 浮动会导致父亲塌陷 */.left {float: left;}.right {float: right;}

html代码：

  <div class="father clearfix"><div class="son left"></div><div class="son right"></div></div>

建议使用 clearfix 类进行清除浮动。

清除浮动可能还有其他方法，这里仅供自己学习期间总结。