float屬性詳解

內容：

1.block與inline複習

2.float介紹

3.float做用

4.清除浮動

 

 

 

1.block與inline複習

 1 block元素是獨立的一塊，獨佔一行
 2 多個block元素會各自新起一行，默認block元素寬度自動填滿其父元素寬度
 3 block元素能夠設置width、height、margin、padding屬性；
 4 
 5 
 6 inline元素不會獨佔一行，多個相鄰的行內元素會排列在同一行裏，直到一行排列不下，纔會新換一行
 7 inline元素其寬度隨內容而變化。inline元素設置width、height屬性無效
 8 inline元素的margin和padding屬性：
 9 水平方向的padding-left, padding-right, margin-left, margin-right都產生邊距效果
10 豎直方向的padding-top, padding-bottom, margin-top, margin-bottom不會產生邊距效果。
11 
12 
13 常見的塊級元素有 div、form、table、p、pre、h1～h五、dl、ol、ul 等。
14 常見的內聯元素有span、a、strong、em、label、input、select、textarea、img、br等

 

 

2.float介紹

什麼是浮動：浮動核心就一句話，浮動元素會脫離文檔流並向左/向右浮動，直到碰到父元素或者另外一個浮動元素。重要的事情請默唸3次

浮動最初設計的目的並沒那麼多事兒，就只是用來實現文字環繞效果而已，以下所示：

實現代碼：

 1 HTML:
 2 <div class="float-test">
 3     <p>
 4         <img class="img-left" src="img/user.jpg" alt="用戶頭像" width="150px" height="150px">
 5         This is some text.This is some text.This is some text.This is some text.、、、
 6     </p>
 7 </div>
 8 
 9 CSS:
10 p{
11     text-indent: 2em;
12 }
13 .img-left{
14     float: left;
15     margin-left: 7px;  
16 }

 

 

3.浮動做用

後來開發者發現浮動的元素能夠設置寬高而且能夠內聯排列，是介於inline和block之間的一個神奇的存在，在inline-block出來以前，浮動大行其道。直到inline-block出來後，浮動也有它本身獨特的使用場景

 

浮動的特性總結以下：

• 浮動會脫離文檔
• 浮動能夠內聯排列
• 浮動會致使父元素高度坍塌

(1)浮動會脫離文檔

浮動會脫離文檔，也就是說浮動不會影響普通元素的佈局；元素浮動以後會忽略其餘元素浮動起來直到遇到父元素或已經浮動的元素，浮動的元素可能會蓋住未浮動的元素以下所示：

 

 

(2)浮動能夠內聯排列

浮動會向左/向右浮動，直到碰到另外一個浮動元素爲止，這是浮動能夠內聯排列的特徵。也就是說，浮動能夠設置寬高，而且可以一行多個，是介於block和inline之間的存在，浮動內聯排列以下所示：

 

(3)浮動會致使父元素高度坍塌

浮動是脫離文檔流，父元素便沒法控制浮動的元素，若是父元素中的子元素所有浮動將致使父元素高度坍塌，這個問題要經過清除浮動來解決

 

 

4.清除浮動

(1)clear語法

1 clear語法：
2 clear : none | left | right | both
3 取值：
4 none : 默認值。容許兩邊均可以有浮動對象
5 left : 不容許左邊有浮動對象
6 right : 不容許右邊有浮動對象
7 both : 不容許有浮動對象
8 可是須要注意的是：clear屬性只會對自身起做用，而不會影響其餘元素
9 若是一個元素的右側有一浮動對象，而這個元素設置了不容許右邊有浮動對象，即clear：right，則這個元素會自動下移一格，達到本元素右邊沒有浮動對象的目的。

 

(2)清除浮動

給浮動的元素的父元素加上如下兩段代碼中任意一段便可：

 1 // 現代瀏覽器clearfix方案，不支持IE6/7
 2 .clearfix:after {
 3     display: block;
 4     content: " ";
 5     clear: both;
 6 }
 7 
 8 // 全瀏覽器通用的clearfix方案
 9 // 引入了zoom以支持IE6/7
10 .clearfix:after {
11     display: block;
12     content: " ";
13     clear: both;
14 }
15 .clearfix{
16     *zoom: 1;
17 }
18 
19 // 全瀏覽器通用的clearfix方案【推薦】
20 // 引入了zoom以支持IE6/7
21 // 同時加入:before以解決現代瀏覽器上邊距摺疊的問題
22 .clearfix:before,
23 .clearfix:after {
24     display: block;
25     content: " ";
26 }
27 .clearfix:after {
28     clear: both;
29 }
30 .clearfix{
31     *zoom: 1;
32 }