css浮动效果造成父元素高度为0，解决

1. 子元素浮动时，会造成父元素高度为0。会造成后面的元素样式混乱。

<div class="outer">
  <div class="inner"></div>
  <div class="inner"></div>
  <div class="inner"></div>
</div>

2. 通过父元素添加:after样式解决。原理相当于末尾添加一个子元素设置其浮动效果清除。

1) :after在元素内末尾添加内容

2) content: ''; 末尾添加的内容

3) display: block; 设置其为块级元素

4) clear: both; 清除浮动效果

.inner {
  width: 200px;
  height: 50px;
  background: #aadddd;
  float: left;
}
.outer:after {
  content: '';
  display: block;
  clear: both;
}