您當前的位置:首頁 > 前端開發 > css技術 css技術

CSS浮動(float,clear)通俗講解

發布時間:08-12  來源:云動網絡  作者:云動  點擊:

  很早以前就接觸過CSS,但對于浮動始終非常迷惑,可能是自身理解能力差,也可能是沒能遇到一篇通俗的教程。
  前些天小菜終于搞懂了浮動的基本原理,迫不及待的分享給大家。
  寫在前面的話:
  由于CSS內容比較多,沒有精力從頭到尾講一遍,只能有針對性的講解。如果讀者理解CSS盒子模型,但對于浮動不理解,那么這篇文章可以幫助你。本文僅僅是入門教程,不當之處請諒解!
  本文以div元素布局為例。
  教程開始:
  首先要知道,div是塊級元素,在頁面中獨占一行,自上而下排列,也就是傳說中的流。如下圖:


  可以看出,即使div1的寬度很小,頁面中一行可以容下div1和div2,div2也不會排在div1后邊,因為div元素是獨占一行的。
  注意,以上這些理論,是指標準流中的div。
  無論多么復雜的布局,其基本出發點均是:“如何在一行顯示多個div元素”。
  顯然標準流已經無法滿足需求,這就要用到浮動。
  浮動可以理解為讓某個div元素脫離標準流,漂浮在標準流之上,和標準流不是一個層次。
  例如,假設上圖中的div2浮動,那么它將脫離標準流,但div1、div3、div4仍然在標準流當中,所以div3會自動向上移動,占據div2的位置,重新組成一個流。如圖:


  從圖中可以看出,由于對div2設置浮動,因此它不再屬于標準流,div3自動上移頂替div2的位置,div1、div3、div4依次排列,成為一個新的流。又因為浮動是漂浮在標準流之上的,因此div2擋住了一部分div3,div3看起來變“矮”了。
  這里div2用的是左浮動(float:left;),可以理解為漂浮起來后靠左排列,右浮動(float:right;)當然就是靠右排列。這里的靠左、靠右是說頁面的左、右邊緣。
  如果我們把div2采用右浮動,會是如下效果:


  此時div2靠頁面右邊緣排列,不再遮擋div3,讀者可以清晰的看到上面所講的div1、div3、div4組成的流。
  目前為止我們只浮動了一個div元素,多個呢?下面我們把div2和div3都加上左浮動,效果如圖:


  同理,由于div2、div3浮動,它們不再屬于標準流,因此div4會自動上移,與div1組成一個“新”標準流,而浮動是漂浮在標準流之上,因此div2又擋住了div4。
  當同時對div2、div3設置浮動之后,div3會跟隨在div2之后,不知道讀者有沒有發現,一直到現在,div2在每個例子中都是浮動的,但并沒有跟隨到div1之后。因此,我們可以得出一個重要結論:
  假如某個div元素A是浮動的,如果A元素上一個元素也是浮動的,那么A元素會跟隨在上一個元素的后邊(如果一行放不下這兩個元素,那么A元素會被擠到下一行);如果A元素上一個元素是標準流中的元素,那么A的相對垂直位置不會改變,也就是說A的頂部總是和上一個元素的底部對齊。
  div的順序是HTML代碼中div的順序決定的??拷撁孢吘壍囊欢耸乔?,遠離頁面邊緣的一端是后。

更多
(^ω^)MG古怪猴子爆分打法 全民欢乐捕鱼OL下载 竞彩混合过关奖金算法 山西11选5走势图 比特币暴涨 网络捕鱼骗局曝光 浙江麻将app 大乐透胆拖奖金查询表 五分赛车计划数据分析 1681c手机股票软件 网络捕鱼游戏控制 北方推倒胡怎么打 3d历史保存在哪 河北20选5五行走势图 1.76火龙大极品篮彩版 山东11选5任选5 股票交易费