利用css3清除浮动

（1）清除前面元素对我的影响

<ul class="m">
  <li>html</li>
  <li>h5</li>
  <li>css3</li>
</ul> <!-- 清除前面元素对我的影响 -->
<ul class="m clearfix">
  <li>html</li>
  <li>h5</li>
  <li>css3</li>
</ul>

css：

.m li {
  width: 140px;
  height: 50px;
  line-height: 50px;
  float: left;
  background-color: pink;
}

.clearfix::before,
.clearfix::after {
  /* content: '';必写属性，就算写空值也要写 */
  content: '';
  display: table;
}

.clearfix::before {
  content: '';
  clear: both;
}

代码演示：

（2）清除后面元素对我的影响

<ul class="m clearfix">
  <li>html</li>
  <li>h5</li>
  <li>css3</li>
</ul>
<ul class="m">
  <li>html</li>
  <li>h5</li>
  <li>css3</li>
</ul>

css：

.clearfix::after{ content: ''; clear:both; }