從新開始學前端之浮動

寒假來了, 打算從新學習總結前端的知識要點以及前端領域出現的新東西，所以有了這個系列。更多內容能夠去個人github: https://github.com/SGAMERyu

1. 浮動

1.1 什麼是浮動

Float是一個CSS定位屬性, 要了解他的目的和起源, 咱們能夠看看印刷設計, 在打印佈局中, 能夠將圖像設置到頁面中, 使得文本根據須要環繞他們。

;

而在頁面中浮動是這樣工做的: 浮動元素會脫離正常的文檔佈局流,並吸附在其父容器的左邊/右邊(float: left/right)。在正常佈局下中位於該浮動元素之下的內容,此時會圍繞着浮動元素。填滿左側或右側的空間。

浮動元素仍然是網頁流的一部分,這與使用絕對定位的頁面不一樣, 絕對定位的頁面元素將從網頁的佈局流中移除。

1.2 浮動使用場景

除了圖像環繞文字以外,浮動可用於建立整個網頁佈局

在較小的佈局中,浮動對佈局也頗有幫助, 若是咱們使用float應用到咱們的圖像上,那麼當圖像改變大小時, 框中的文本將回流適應

一樣的佈局也能夠經過容器上的相對定位和絕對定位來完成,這樣作的話, 文本將不會受到化身的影響,而且不能在大小改變時從新排版

1.3 清除浮動

Float的相對屬性是Clear, 一個擁有clear屬性的元素, 並不向像浮動元素的方向移動,而是會在浮動元素的下方

在上面的例子中, slidebar像右浮動,比Main Content內容區域短,而後footer被移動到浮動所需的可用空間。要解決這個問題,咱們能夠給footer元素設置清除浮動時

#footer {
  clear: both;
}

clear也有四個有效值, both是最經常使用的,清楚來自任意方向的浮動, left和right能夠用來分別從一個方向清除浮動。

1.4 浮動問題

若是父元素只包含浮動的元素,那麼他的高度就會塌陷。若是父元素不包含任何視覺明顯的背景,並不會有什麼問題。可是更難的是這種狀況

<p>
 float before
 <span style="float:left">
<p>

<p>float after<p>

這樣輸寫代碼會形成這樣的狀況

這樣使用浮動會在文本流中出現不天然的間隔中斷。並且沒有實際的方法來修復他

1.5 清除浮動的技巧

• 空div法: 在父元素中添加一個div,也能夠是<br>元素獲取其餘元素。

<div style="clear:both">

• overflow: 在父元素上設置overflow屬性，若是此屬性設置爲auto或者hidden則能夠達到清除浮動的效果。但要注意overflow並非專門用於清除浮動。
• 僞元素法: 使用僞元素來清除浮動，也是目前經常使用的方法

.clearfix{
  zoom: 1;
  display: block;
}
.clearfix:after{
  content: "";
  visibility: hidden;
  display: block;
  height: 0;
  clear: both;
}

閱讀原文: https://css-tricks.com/all-ab...