CSS（五）浮動

本章主內容

• 浮動是什麼
• 如何浮動
• 浮動的反作用及如何清除反作用
• 使用場景

1、浮動（float）

含義：讓元素浮動起來，並排排列；

2、如何浮動

• float:left     一、二、3
• float:right    注意 採用倒序排列  ...三、二、1
• float:none  不浮動
• float: inherit   繼承父元素浮動方式

注意點：一但元素有浮動屬性，自動轉換成塊級元素；

3、反作用

子元素浮動、父元素則塌陷

周圍元素會會受到影響 如：浮動元素脫離文檔流，其餘未浮動元素會佔據浮動元素的位置，浮動元素會浮在爲浮動元素的上面；

 

4、解決反作用

A、解決父元素塌陷問題

a.一、給父元素添加高度

a.二、父元素添加兩個屬性

• overflow:hidden
• zoom:1

a.三、父元素也給一個浮動，不建議使用，周圍元素會產生反作用；

B、解決影響周圍元素問題

b.一、添加一個空元素設置clear方法

• clear:none   不浮動
• clear:left   左邊不容許有浮動元素
• clear:right  右邊不容許有浮動元素
• clear:both  兩邊不容許有浮動元素

C、推薦組合使用 a.2和b.1

 

5、使用的場景

A、文本環繞

兄弟爲文字 文字不須要浮動，浮動不是文字的兄弟元素，便可實現文本環繞。

........