浮動

浮動

什麼是浮動？

標籤的浮動是指設定了浮動屬性的標籤會脫離標準流的控制，移動到其父標籤的指定位置

浮動屬性

• float
  • left
  • right
  • none 預設

浮動的作用

• 圖文環繞
• 頁面佈局

浮動的問題

標籤浮動以後，脫離的正常文件流，導致父標籤無法被撐開，會影響後續正常佈局

清浮動的幾種方法

• 給浮動標籤的父標籤固定高度（不夠靈活）

• 在浮動標籤的最後加一個div（塊標籤），標籤本身不符動，且新增樣式 clear:both;(程式碼冗餘)

• 給父標籤加overflow屬性，overflow為visible以外的其他值時可以幫助實現

• 推薦方法：給浮動標籤的父標籤新增 .clearfix

  • .clearfix {
    	*zoom:1; //這是針對於IE6/7的
    }
    .clearfix:after {
    	content:"";
    	clear:both;
    	display:block;
    }
    

偽元素

• div:after {
  	
  }
  //向當前元素的最後一個子元素後新增一個元素
  div:before {
  	
  }
  //向當前元素的第一個子元素前新增一個元素