浮動

shadow_zhen發表於2020-07-11

浮動是什麼?

元素設定了float:left或者float:right,相應的就會向其父元素的左側或右測進行浮動

浮動元素的特點

  • 浮動的元素完全脫離標準流(脫標),不再佔用標準流中的位置
  • 浮動元素的寬高是由內容撐開
  • 設定浮動以後會向父元素的左側或右側移動
  • 浮動元素預設不會從父元素中移出
  • 浮動元素向左或向右浮動時,不會超過它前邊的其他浮動元素
  • 如果浮動元素的上邊是一個沒有浮動的塊級元素,則浮動元素無法上移
  • 浮動元素一般只能覆蓋標準流中的塊級元素，其他如文字、圖片和行內塊，會把這些元素擠到一邊去

為什麼要清除浮動?

由浮動元素的特點可知,浮動元素脫標,不再佔用標準流中的位置,所以,如果父元素不設定高度,浮動元素不能撐起其父元素的高度,其父元素的兄弟塊級元素(沒有浮動)位置會自動上移,浮動元素對標準流中的其他元素的佈局影響較大,導致頁面佈局混亂,所以必須要清除浮動帶來的影響.

清除浮動的幾種方式

  • 父級元素定義height

    父元素設定高度.png

  • 父級元素開啟BFC(Block Formatting Context)塊級格式化上下文

    • 設定overflow:hidden（只要不是visible就可以）

    • 父級元素設定display:table

    • 其他任何可以開啟父元素BFC的方法都可以

      開啟BFC.png

  • 額外標籤法:結尾處加空div標籤或其他塊級標籤clear:both

    額外標籤.png

  • 單偽元素清除法
.clearfix::after {  
     content:'';  
     display:block;  
     clear:both;  
    }  
    ​  
    .clearfix {  
     \*zoom:1;  /\*IE/7/6\*/  
    }
  • 雙偽元素清除法
.clearfix::before,  
    .clearfix::after{  
     content: '';  
     display: table;  
    }  
    ​  
    .clearfix::after{  
     clear:both;  
    }   
    ​  
    .clearfix{   
     \*zoom:1;  /\*IE/7/6\*/  
    }

注意點:

*   單偽類或雙偽類是清除浮動比較好的方法,推薦使用
    
*   單偽類和雙偽類清除浮動的原理是一樣的,只是單偽類只能用於清除浮動,而雙偽類既能清除浮動,又能解決垂直方向父子元素的外邊距塌陷問題

單偽元素清除浮動的原理

清除浮動,即清除浮動元素對其周圍元素(浮動元素的兄弟元素)的影響,即使浮動元素脫標了,他的兄弟元素在標準流中位置不會受到影響

偽元素清除浮動原理和額外標籤法一樣，

額外標籤法的缺點：

  • 額外標籤是在html結構中建立額外的空div標籤，這個標籤除了用於清除浮動，沒有任何其他作用，在html結構中顯得冗餘
  • 浮動元素下面的兄弟元素位置上移，在瀏覽器中屬於樣式部分，用html結構處理樣式的問題，沒有做到html結構和css樣式完全分離

程式碼解析：

/\*建立一個清除浮動的類，結構中哪個元素浮動了，給他的父元素新增這個類即可\*/  
/\*在父元素的內容區後面建立一個元素，這個元素相當於額外標籤法中的那個冗餘的標籤\*/  
.clearfix::after {  
 /\*使用偽元素建立元素，必須加content：'';內容為空也可以\*/  
 content:'';  
 /\*使用偽元素建立的元素預設是行內元素，需要轉化塊級元素\*/  
 display:block;  
 /\*清除浮動的關鍵程式碼\*/  
 clear:both;  
}  
​  
/\*相容IE6/IE7\*/  
.clearfix {  
 \*zoom:1;  /\*IE/7/6\*/  
}
偽元素清除法解決了額外標籤法的缺點，透過偽元素建立的元素不會在html結構中出現，不會使html結構顯得冗餘，完全使用css手段解決了浮動帶來的影響，實現了html結構和css樣式的完全分離

單偽元素清除法和雙偽元素清除法的區別

單偽元素只能清除浮動，雙偽元素既能清除浮動，又能解決外邊距塌陷問題

外邊距塌陷是什麼？

垂直方向相鄰的塊級元素,兄弟元素之間會出現外邊距合併問題，父子元素之間則會出現外邊距塌陷問題，即給子元素設定margin-top，父元素會隨子元素會同時向下移動

解決方法:

  • 讓父子元素上外邊距不相鄰

    • 給父元素設定上外框
    • 給父元素設定上內邊距
    • 在html結構中父子元素之間加一個table標籤

  • 開啟父元素的BFC

    • 父元素設定overflow:hidden;
    • 父元素設定display：table；
  • 把父元素或子元素轉換為行內塊

而雙偽元素解決外邊距塌陷問題，則是利用了讓父子元素外邊距不相鄰的原理

程式碼解析:

/\*在父元素的內容區前面建立一個元素，這個元素相當於把父元素和子元素的上外邊距隔開\*/  
.clearfix::before,  
/\*在父元素的內容區後面建立一個元素\*/  
.clearfix::after{  
 /\*使用偽元素，必須寫content\*/  
 content: '';  
 /\*，把元素轉化為table，使建立的元素具有表格的屬性\*/  
 display: table;  
}  
/\*清除浮動所特有的程式碼，所以單獨寫\*/  
.clearfix::after{  
 clear:both;  
}   
/\*相容IE6/IE7\*/  
.clearfix{   
 \*zoom:1;  /\*IE/7/6\*/  
}

display：table和display：block的區別

有時我們會看到這樣的程式碼

.clearfix::before,  
.clearfix::after {  
 content: '.';  
 display: block;  
 height: 0;  
 line-height: 0;  
 font-size: 0;  
 overflow: hidden;  
}  
​  
.clearfix::after {  
 clear: both;  
}  
​  
.clearfix {  
 \*zoom: 1;  /\*IE/7/6\*/  
 }

程式碼的不同是display的屬性值不同導致的，而這些區別就是為了解決外邊距塌陷問題，清除浮動使用display：block或display;table都可以。

當display是table時，則會建立一個獨立的渲染區域（開啟BFC），不管content屬性中內容是否為空，這個區域會隔開父元素和子元素的上外邊距。（注意：父元素設定display：table，則是開啟父元素的BFC;而偽元素方法是在父元素內容區前面建立一個元素把父元素和子元素的上外邊距隔離開）

當display是block時，如果content屬性中內容為空，則不能隔開父元素和子元素的上外邊距，因為display：block不能開啟BFC，所以content屬性中內容必須要有值才可以隔開父元素和子元素的上外邊距，而這個值並不是我們需要，並且也會影響到頁面的佈局，所以會有height:0;line-height:0;font-size：0；overflow：hidden；把文字隱藏，也不會對頁面佈局有影響，而在display：table中這些程式碼就不是必須的。

相關文章