浮動簡介

基本概念

標準流：是元素排列的默認狀態(tài)荆秦，塊級元素從上到下排列，行內元素從左到右排列癌刽。

塊元素：元素獨占一行役首，默認寬度為父元素的100％尝丐，可以設置寬度和高度。

行內元素:元素在一行內排列直到排滿了自動換行衡奥，不可以設置寬高爹袁，寬高由內容決定。

inline-block：在一行內顯示并且可以設置寬高矮固。

浮動是什么

浮動會使得元素脫離標準流失息，向左或向右”漂浮“起來，直到遇到父元素的邊框或者一個浮動著的元素的邊框為止档址。

脫離標準流的浮動元素怎么排列

它不再按照默認的狀態(tài)排列盹兢，會向左或向右靠，直到找到父元素的邊框或正在浮動的元素的邊框守伸。

浮動之前的排列

三個盒子都向左浮動的排列

可以看出绎秒，沒有浮動之前，塊元素在標準流中是獨占一行從上往下排列的尼摹。而浮動之后见芹，塊元素就“漂浮”起來，直到找到父元素的邊框或浮動著的元素的邊框窘问，就不再往左（右）靠辆童。box1找到了父元素的邊框，box2找到了正在浮動的box1邊框惠赫，box3找到了box2的邊框把鉴。

浮動會帶來什么影響

浮動元素脫離標準流之后，排在它后面的元素不知道它的存在儿咱，所以在標準流中的普通元素會占據它的位置庭砍，發(fā)生重合。同理混埠，包含它的父元素如果高度是自適應的（沒有設置高度怠缸，由內容撐開），由于檢測不到它钳宪，所以沒有它的高度揭北，會出現高度塌陷的現象。

元素重合

這里給box1添加的float：left的樣式吏颖，box2和box3沒有浮動搔体。可以看到半醉，灰色的box2不見了疚俱，是因為box1浮動后脫離了標準流，box2和box3仍在標準流中正常排列缩多，它們看不到box1的存在呆奕，所以就占據了它的位置养晋。

父元素高度塌陷

這里給box1，box2梁钾，box3都設置了左浮動绳泉，并取消了父元素的高度設置。浮動元素脫離標準流之后陈轿，包含它的父元素也看不到它了圈纺，當父元素的高度有里面的內容撐開時，父元素無法獲得浮動元素的高度麦射，就會出現高度塌陷蛾娶，若父元素內所有元素都浮動起來，父元素就沒有高度了潜秋。

那浮動有什么用

細心觀察元素重合時的現象會發(fā)現蛔琅，盒子里的文字并沒有被浮動起來的元素擋住，如下圖峻呛。

文字沒有和浮動元素重合

利用這一特性罗售，我們可以讓文字環(huán)繞著它。

實際上浮動一開始是用來做文字環(huán)繞圖片的钩述，當我們給圖片設置浮動寨躁，圖片會脫離標準流，周圍的文字就會擠向它牙勘，就圍繞著圖片排列了职恳。為什么文字不會像其他元素一樣占據它的位置發(fā)重合呢？浮動設計出來就是為了讓文字環(huán)繞它而別的元素不能環(huán)繞它方面，浮動元素仍然會占據文本空間放钦，因此文本元素可以檢測到它，其他元素檢測不到它恭金。

浮動可以使元素具有inline-block的特性操禀，使得塊級元素可以在一行內排列，所以也會用來做布局横腿。

怎么解決浮動帶來的影響

首先我們要知道浮動元素會使得后面的元素擠向它颓屑，之前的不受影響。所以要在影響后面元素的浮動元素清除浮動耿焊，讓后面的元素可以檢測到它揪惦，不占據它的位置。還有搀别，讓父元素也可以檢測到它丹擎，把它的高度值包含在內尾抑。這樣歇父，浮動既達到了目的又不影響后面的元素蒂培，皆大歡喜。

清除浮動

清除浮動之前榜苫，了解一下清除浮動的語法

clear：left

左側抗浮動护戳，只對自身元素有影響，清除元素左邊的浮動垂睬。注意：不是讓它不浮動媳荒，是讓它的左邊不允許有浮動元素。

還有right驹饺，both钳枕，none都同理就不一一說了。

清除浮動之前

此時赏壹，三個元素都設置了左浮動鱼炒，box1貼著父元素的邊框，box2貼著浮動元素box1的邊框蝌借，box3貼著浮動元素box2的邊框昔瞧。

清除box1的左浮動

在box1的樣式中清除左浮動后，由于它左邊框沒有任何浮動元素菩佑，所以不起作用自晰。

清除了box2的左浮動

在box2的樣式中清除左浮動后，由于box2左邊框是具有浮動屬性(不為none)的元素box1稍坯，box2不再允許左邊有這樣的元素酬荞，所以它會另起一行顯示。

清除了box3的左浮動

box3同理劣光。

清除浮動之后帶來的好處

從上面的例子可以看出袜蚕，元素清除浮動后，不允許左邊或右邊有浮動元素的存在绢涡，所以它不會越過浮動元素的邊框牲剃，占據浮動元素的位置，就不會發(fā)生重合了雄可。clear清除浮動的目的已經達到了凿傅，它只是讓自己的左邊或右邊沒有浮動的元素。但我們會發(fā)現数苫，父元素仍然是高度塌陷的聪舒，清除浮動之后父元素仍然無法檢測到它的高度。因為clear僅僅是讓它自身的左邊或右邊不存在浮動元素而已虐急。那我們怎么讓父元素把浮動起來的元素包含在內容中撐起父元素的高度呢箱残？

如何解決父元素的高度塌陷問題

讓浮動的元素繼續(xù)浮動而不去清除最后一個浮動讓它掉下來被父元素發(fā)現然后包含進去。這時我們就需要有其他元素充當這個角色(被父元素檢測到包含進去計算高度)

具體做法

1.在父元素末尾添加一個空的塊級元素，也就是浮動元素的兄弟元素被辑，父元素就知道里面有內容了燎悍，會給這個空元素留位置。實際上這個空元素的高度是零呀盼理，父元素即使要給它留位置也只能留0個單位值谈山，相當于沒有。那這個空元素有什么作用呢宏怔？給空元素添加清除浮動試試奏路。

空元素清除浮動后

現在，父元素檢測到高度了臊诊。這是因為鸽粉，空元素就和我們上面清除的浮動一樣，它不允許左邊或右邊存在浮動元素抓艳，因此它會另起一行顯示潜叛，如果它有高度或內容的話，就會像下面一樣壶硅，設置了黑色的背景顏色以及2px的高度威兜。我們當然不希望它顯示出來，所以它的內容是空的也沒有任何樣式庐椒，只是幫我們清除浮動而已椒舵。這時候，父元素就可以知道內容的高度了约谈，這樣笔宿，父元素的高度就被撐起來了。

空元素的位置

2.使用css3的after偽元素清除浮動(該偽元素是在元素內容最末尾默認嵌套的一個元素)棱诱，原理和第一種方法相同泼橘。

其中，要在偽元素添加內容設置的樣式才生效迈勋。設置高度是因為設置的內容會撐開一定的高度炬灭，父元素會包含這個高度。把內容設置成不可見的否則影響美觀靡菇。設置成塊元素因為要把父元素的所有內容包含進去重归，這樣才會有高度，否則行內元素無法包含浮動元素厦凤，父元素就不能計算實際內容的高度了鼻吮。準備工作做好之后，就可以像第一種方法那樣清除浮動了较鼓。

樣式代碼展示

把樣式應用到塌陷的父元素中

把樣式單獨聲明出來而不直接在父元素內設置樣式是因為也許整個頁面還有多處需要解決高塌陷的問題椎木，到時候直接添加類屬性就可以了。

3.在包含浮動元素的父元素中添加overflow屬性隱藏（只要不是visible）起來。

嚴格來說它并沒有清除浮動香椎，而是觸發(fā)了塊格式化上下文（BFC）勇垛，簡單來說這里BFC會創(chuàng)建一個隔離的區(qū)域，把浮動的子元素也包含進去士鸥，不會受外界的影響同時也不會影響外界。所以父元素得到了浮動元素的高度谆级，就不會出現高度塌陷的問題烤礁。但是，如果父元素所包含的元素中肥照，有不浮動的普通元素脚仔，它仍然會擠向正在浮動的元素并且發(fā)生重合。這就可以看出來舆绎，BFC并沒有清除浮動鲤脏。實際上元素重合和父元素塌陷是兩個問題所在。

這里做個小結

以上的三種方法中吕朵，方法一和方法二實際上原理相同猎醇，都是在父元素的最后一個元素清除浮動，這個元素告知父元素里面還有內容需要顯示相應的高度努溃，至于高度是多少是由清除浮動元素的最后占位決定硫嘶。方法三是讓父元素包含浮動元素，從而把浮動元素及其它元素的高度計算進去梧税，并沒有去清除浮動沦疾。