CSS——float屬性備忘筆記

經過指定CSS屬性float的值,從而使元素向左或向右浮動,而後由後繼元素向上移動以填補前面元素的浮動而空出的可用空間。CSS的float屬性,做用就是改變塊元素對象的默認顯示方式,HTML標籤設置了float屬性以後,它將再也不獨自佔據一行,從而能夠實現多個元素同處一行的效果。Float的功能很強大,可是若是沒有好好掌握而使用極可能會成爲你調試樣式的噩夢。css

使用Float樣式,若是沒有清除浮動,那麼有浮動元素的父元素容器將沒法自動撐開。若是沒有清除內部浮動,此時會致使浮動的父元素沒法自動撐開到自己應有的高度。也就是說:當一個元素是浮動的,若是沒有關閉浮動時,其父元素不會包含這個浮動元素,由於此時浮動元素從文檔流中脫離。html

因此須要在樣式定義的後面進行清除浮動,清除浮動的方法有幾種:瀏覽器

 

1.Clear:both清除浮動

 

clear清除浮動主要是借用clear屬性來清除浮動,這是一種比較陳舊的清除浮動方法,可是感受通常遇到這種問題都會用這種方法去清除浮動。使用clear:both來清除浮動,咱們須要在須要清除浮動地方的後面緊接着增長一個額外元素,好比說一個div標籤,而且定義他們的樣式爲「clear:both」,其一般使用的結構方式以下:spa

 

<div class="demo A">
    <div class="demoB demoFloat">float left</div>
    <div class="demoC demoFloat">float right</div>
    <div class="demoD demoFloat">not float</div>
    <div class="clear"></div>
</div>
  .clear {
    clear:both;/*主要使用這個屬性來清除浮動*/
    /*爲了避免讓ie具備必定的空間,我的建議加上下面三個屬性*/
    height: 0;
    line-height: 0;
    font-size: 0;
  }
 

 

 

 

2.使用overflow

用overflow方法來清除浮動相對來講比較簡單,只須要在有浮動的元素上面加上下面的屬性:調試

 

 .A {
    overflow: auto;
    zoom: 1;/*在IE下觸發其layout,也要以使用_height:1%來代替zoom*/
  }

 

使用overflow屬性來清除浮動有一點須要注意,overflow屬性共有三個屬性值:hidden,auto,visible。咱們可使用hiddent和auto值來清除浮動,但切記不能使用visible值,若是使用這個值將沒法達到清除浮動效果,其餘兩個值均可以。code

對於overflow屬性清滁浮動咱們還能夠這樣應用:htm

 

   .A {
      overflow: auto;/*除IE6以及其如下版本不識別以外,其餘瀏覽器都識別*/
   }
	
   * html .A {
      height: 1%; /* IE5-6 */
   }

 

3.clearfix方法

這種方法清除浮動是如今網上最拉風的一種清除浮動,是利用:after和:before來在元素內部插入兩個元素塊,從而達到清除浮動的效果。其實現原理相似於clear:both方法,只是區別在於:clear在html插入一個div.clear標籤,而clearfix利用其僞類clear:fix在元素內部增長一個相似於div.clear的效果。下面來看看其具體的使用方法:對象

HTML Code:文檔

 

   <div class="demo A clearfix">
     <div class="demoB demoFloat">float left</div>
     <div class="demoC demoFloat">float right</div>
     <div class="demoD demoFloat">not float</div>
   </div>

 

使用clearfx來清除浮動最主要掌握一點,須要在有浮動元素的父元素中加入一個叫clearfix的class名稱,好比說咱們這個例子,咱們須要在div.A中加入一個clearfix的class名。接着在給這個clearfix加上樣式it

 

  .clearfix:before,
  .clearfix:after {
     content: ".";
     display: block;
     height: 0;
     visibility: hidden;
  }
  .clearfix:after {clear: both;}
  .clearfix {zoom: 1;} /* IE < 8 */

 

其實只使用clearfix:after就能夠達到清除浮動的效果,但只使用clearfix:after時在跨瀏覽器兼容問題會存在一個垂直邊距疊加的bug,因此爲了讓瀏覽器兼容這個clearfix的清除浮動,在原來的基礎上加止clearfix:before,這樣就解決了跨瀏覽器的兼容問題。

在這麼多種清除浮動的方法中,都沒有離開最原始的clear:both方法,特別是clearfix:after清除浮動,徹底就是clear:both的一種變身,區別在於不須要在html增長一個標籤,而只須要在有浮動元素的父元素中加上一個clearfix的class名,這樣就輕鬆解決了清除浮動的問題。

相關文章
相關標籤/搜索