清除浮动的方式除了overflow 还可以用clear

清除浮动的方式除了overflow 还可以用clear；
在外层元素的伪元素中 设置clear：both; content: "";display:table;

<style type="text/css">

    * {

      box-sizing: border-box;

    }

    /* .clearFix::after {

      content: "";

      clear: both;

      display: table;

    } */

    /*上边这段代码更好更安全*/

    /*.clearFix {

      overflow: auto;

    }*/

    /*如果一个元素比包含它的元素高，并且它是浮动的，它将溢出到容器之外，然后我们可以向包含元素添加 overflow： auto;  来解决此问题*/

    .wenben {

      background: #eee;

      width: 33.33%;

      padding: 20px;

      float: left;

      border: 2px double #000;

    }

  </style>

<div class="clearFix">

  <div class="wenben">

    <p>文本</p>

  </div>

  <div class="wenben">

    <p>文本1</p>

  </div>

  <div class="wenben">

    <p>文本2</p>

  </div>

</div>