清除浮動方式

清除浮動方式一

  子元素浮動，給父元素設置高度；

清除浮動方式二

  例子：有兩個div標簽，設置裡面的元素浮動，他們會併排一行，實現兩個盒子各占一行，給第二個盒子設置clear:both屬性即可

  問題：第二個盒子的margin屬性會失效　　

清除浮動方式三(不推薦)

  1.外牆法：在兩個浮動盒子的中間設置一個div標簽的clear屬性即可，但第一個盒子的margin-bottom 屬性會出現問題，一般直接設置在中間的塊級元素

  2.內牆法：在第一個盒子所有子元素的最後添加 一個額外的塊級元素標簽，設置clear屬性。兩個盒子的margin屬性不會出現問題，而且可以設置高度來撐起父元素的高度

清除浮動方式三(推薦)

  通過偽類選擇器給第一個盒子設置額外的塊級標簽

1 .div1::after{
2   content:'';
3   display:'block';
4   visibility:hidden;
5   height:0;
6   clear:both
7 }
  .div1{
   *zoom:1;  /*相容IE6*/
 }

清除浮動方式四(推薦)

  給第一個盒子設置overflow：hidden屬性，也是通過*zoom:1相容IE