1. 浮動元素有什么特征?對父容器、其他浮動元素、普通元素、文字分別有什么影響?
特征
- 任何定義為float的元素都會自動被設置為一個塊狀元素顯示,相當於被定義display:block;聲明。這樣就可以為浮動元素定義width和height屬性,即使是內聯顯示元素也可以。
- 當我們沒有指定浮動元素寬度時,浮動元素會自動收縮到能夠包含內容的寬度。而塊狀元素(或者被定義display:block;)顯示時,如果沒有定義,它的寬度則會自動顯示為100%。
- 浮動模型不會與流動模型發生沖突,當元素定義為浮動布局時,它在垂直方向上應該還處於文檔流中,也就是說浮動元素不會脫離正常文檔流而任意浮動,它的上邊線將會與未被聲明為浮動時的位置一樣,但是在水平方向上,它的浮動邊會盡可能的靠近它的包含元素邊緣。
- 與普通元素一樣,浮動元素始終位於包含元素內,不會游離於外,或破壞元素包含關系。
- 浮動元素后面的塊狀元素和內聯元素都能夠以流的形式環繞浮動元素左右。甚至於上面文本流連成一體。
- 當兩個或兩個以上的相鄰元素都被定義為浮動顯示時,如果存在足夠的空間容納它們,浮動元素之間可以並列顯示,它們的上邊線是在同一水平線上。如果沒有足夠空間那么后面的浮動元素將會下移到能夠容納它的地方這個向下移動的元素有可能產生一個單獨的浮動。
對父容器的影響
浮動元素脫離文檔流向左或者向右移動,直到邊框碰到父元素的邊緣。
對其他浮動元素的影響
當一個浮動元素在浮動過程中碰到同一個方向的浮動元素時,它會緊跟在它們后面,當空間不夠的時候會被浮動元素卡住。
對普通元素的影響
普通元素無法感知到浮動元素,占據浮動元素所在的位置,但是普通元素處於浮動元素的下層。
對文字的影響
浮動元素旁邊的文字框被縮短,從而給浮動元素留出空間,文字框圍繞浮動元素。
2. 清除浮動指什么?如何清除浮動?
是什么
在非IE瀏覽器(如Firefox)下,當容器的高度為auto,且容器的內容中有浮動(float為left或right)的元素,在這種情況下,容器的高度不能自動伸長以適應內容的高度,使得內容溢出到容器外面而影響(甚至破壞)布局的現象。這個現象叫浮動溢出,為了防止這個現象的出現而進行的CSS處理,就叫CSS清除浮動。
清除浮動方法
方法一: 使用帶clear屬性的空元素
在浮動元素后使用一個空元素如<div class="clear"></div>,並在CSS中賦予.clear{clear:both;}屬性即可清理浮動。亦可使用<br class="clear" />或<hr class="clear" />來進行清理。
優點:簡單,代碼少,瀏覽器兼容性好。
缺點:需要添加大量無語義的html元素,代碼不夠優雅,后期不容易維護。
方法二: 使用CSS的overflow屬性
給浮動元素的容器添加overflow:hidden;或overflow:auto;可以清除浮動,另外在 IE6 中還需要觸發 hasLayout ,例如為父元素設置容器寬高或設置 zoom:1。在添加overflow屬性后,浮動元素又回到了容器層,把容器高度撐起,達到了清理浮動的效果。
方法三: 給浮動的元素的容器添加浮動
給浮動元素的容器也添加上浮動屬性即可清除內部浮動,但是這樣會使其整體浮動,影響布局,不推薦使用。
方法四: 使用鄰接元素處理
什么都不做,給浮動元素后面的元素添加clear屬性。
方法五:使用CSS的:after偽元素
結合 :after 偽元素(注意這不是偽類,而是偽元素,代表一個元素之后最近的元素)和 IEhack ,可以完美兼容當前主流的各大瀏覽器,這里的 IEhack 指的是觸發 hasLayout。 給浮動元素的容器添加一個clearfix的class,然后給這個class添加一個:after偽元素實現元素末尾添加一個看不見的塊元素(Block element)清理浮動。
需要注意的是為了IE6和IE7瀏覽器,要給clearfix這個class添加一條zoom:1;觸發haslayout。
<div class="container clearfix"> <div class="wrap">aaa</div> </div> .clearfix:after{ content:""; /*設置內容為空*/ height:0; /*高度為0*/ line-height:0; /*行高為0*/ display:block; /*將文本轉為塊級元素*/ visibility:hidden; /*將元素隱藏*/ clear:both; /*清除浮動*/ } .clearfix{ zoom:1; /*為了兼容IE*/ }
