清除浮動方式

時間 2019-12-11

標籤清除浮動方式简体版

原文原文鏈接

清除浮動方式一spa

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

清除浮動方式二blog

例子：有兩個div標籤，設置裏面的元素浮動，他們會並排一行，實現兩個盒子各佔一行，給第二個盒子設置clear:both屬性便可it

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

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

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

2.內牆法：在第一個盒子全部子元素的最後添加一個額外的塊級元素標籤，設置clear屬性。兩個盒子的margin屬性不會出現問題，並且能夠設置高度來撐起父元素的高度di

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

經過僞類選擇器給第一個盒子設置額外的塊級標籤vi

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。