帶你熟悉CSS浮動

阿豪聊乾貨發表於2016-05-14
CSS

一、概念理解

　　浮動：顧名思義先浮後動，浮動的物件會先漂浮起來，離開自己原來的位置（也就是所謂的脫離文件流），後動的意思是，它的後面的元素會向它原來的位置動起來。

二、注意事項

　　1.當元素有浮動屬性時，會對其父元素或後面的元素產生影響，會出現一個佈局錯亂的現象。（我們可以通過清除浮動的方式進行解決這個問題）

　　2.當父元素沒有指定高度並且子元素有浮動時，這個父元素的高度不會自動增加。

　　3.清除浮動：就是可以去掉前面物件的浮動對後面物件的印象，是加給未浮動元素的。

　　　　語法：clear：none(預設值，允許兩邊都可以有浮動) both(左右兩側都不允許有浮動) left(左側不允許有浮動) right(右側不允許有浮動)。

　　　　清除浮動方法總結：

　　　　　　[1].額外標籤法：W3C建議在父元素的末尾增加一個css為”clear:both”的元素，強迫容器適應它的高度以便裝下所有浮動的元素。(缺點是會增加程式碼)。
　　　　　　[2].父元素使用overflow的方法:通過設定父元素的overflow的屬性為hidden，是最簡單的清除浮動的方法，但是如果子元素使用定位佈局，將很難實現。
　　　　　　[3].利用偽物件after方法：定義一個類，使用偽對象after
控制浮動元素的影響，網上最流行的清除浮動的程式碼：
 
　　　　　　　　.clearFix{clear:both;display:block

;visibility:hidden;height:0;line-height:0;contect:””;} (.clearFix{zoom:1;}解決IE6/7相容性問題)。

 

　　4.另外一種解決浮動佈局錯亂問題的方式：給浮動元素的父元素加寬度。

三、使用方式

　　我們可以直接定義好浮動的CSS，然後應用給指定的需要浮動的元素就好了，方式非常簡單易用。比如：

　　

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <title>浮動測試</title>
 5         <style type="text/css">
 6             .right{float:right;background-color:Red;height:150px;width:150px;border-radius:50%;margin-top:50px;margin-right:20px;}
 7             .left{float:left;background-color:Blue;height:150px;width:150px;border-radius:50%;margin-top:50px;margin-left:20px;}
 8         </style>
 9     </head>
10 <body>
11     <div class="right"></div>
12     <div class="left"></div>
13 </body>
14 </html>

執行效果如下：

就是這麼簡單，有什麼不懂得可以加我QQ：1281616040細聊。。。。

　　　　


相關文章