說明

• 源代碼
• 學習

---

1. 浮動

1.1 CSS布局的三種機制

網頁布局的核心 — 利用 CSS 來擺放盒子

CSS提供了3種機制來設置盒子的擺放位置: 標準流、浮動和定位.

1. 標準流:
   • 塊級元素(div、hr、p、h1~h6、ul、ol、dl、form、table)會獨占一行,從上向下順序排列
   • 行內元素(span、a、i、em)按照順序從左到右排列,遇到父元素邊緣自動換行
2. 浮動:
   • 讓多個盒子一行顯示
3. 定位:
   • 將盒子定在瀏覽器的某一個位置

1.2 浮動

1.2.1 讓多個盒子在同一行顯示

div{float: left;
}

• 元素的浮動式值: 設置了浮動屬性的元素會: 脫離普通標準流、移動到指定位置.

1.3 什么是浮動(float)

• 浮動: 會改變float屬性的display屬性(會變為類似于inline-block)

div{width: 200px;height: 200px;background-color: pink;
}

• 注意: 浮動的元素互相貼靠一起的,但是如果父級寬度裝不下這些盒子,多出的盒子會另起一行對齊

1.4 浮動的目的(float)

我們使用浮動的核心目的 — 讓多個塊級盒子在同一行顯示.

1.5 浮動的應用

浮動和標準流的父盒子搭配

我們直到,浮動式脫標的,會影響下面的標準流元素,此時,我們需要給浮動的元素添加一個標準流的父親,這樣,最大化的減小了對其他標準流的影響.

一個完整的網頁,是 標準流 + 浮動 + 定位

1.6 浮動的擴展

1) 浮動元素與父盒子的關系

• 子盒子的浮動參照父盒子對齊
• 不會與父盒子的邊框重疊,也不會超過父盒子的內邊距

2) 浮動元素與兄弟盒子的關系

在一個父級盒子種,如果前一個兄弟盒子是:

- 浮動的,那么當前盒子會與前一個盒子的頂部對齊
- 普通流,那么當前盒子會顯示在前一個兄弟盒子的下方

浮動只會影響當前的或者后面的標準流盒子,不會影響前面的標準流

建議:如果一個盒子里面有多個盒子,如果其中一個盒子浮動了,其他兄弟也應該浮動

---

2. 為什么要清除浮動

2.1 為什么要清除浮動

因為父級盒子很多情況下,不方便給高度,但是盒子浮動就不占有位置,最后父級盒子高度為0,就影響了下面的標準流盒子.

• 總結：
  • 由于浮動元素不再占用文檔里的位置,所以它會對后面的元素排版產生影響
  • 準確地說,并不是清除浮動,而是清除浮動后造成的影響

2.2 清除浮動的本質

清除浮動主要是為了解決父級元素因為子級元素浮動引起內部高度為0的問題

2.3 清除浮動的方法

清除浮動只會,父級就會根據盒子自動檢測高度。父級有了高度,就不會影響下面的標準流了

• 語法:

選擇器{clear: both;}

屬性值	描述
left	不允許左側有浮動元素
right	不允許右側有浮動元素
both	同時清除左右兩側浮動的影響

但是我們實際工作做那個,幾乎只用 clear: both

1) 額外標簽法(隔墻法)

W3C推薦的做法是通過在浮動元素末尾添加一個空的標簽<div style="clear: both">,或其他標簽br等亦可

• 優點: 通俗易懂,書寫方便
• 缺點: 添加許多無意義的標簽,結構化較差

2) 父級元素添加overflow屬性方法

可以給父級添加: overflow為 hidden| auto | scroll 都可以實現

• 優點: 代碼簡潔
• 缺點: 內容增多時候容易造成不會自動換行導致內容被隱藏掉,無法顯示需要溢出的元素

3) 使用after偽元素清除浮動

:after方式為空元素額外標簽法的升級版,好處是不再單獨加標簽了

使用方法:

.clearfix:after{content: "";display: block;height: 0;clear:both;visibility: hidden;
}
.claerfix {*zoom: 1;			/* ie6,7清除浮動的樣式 */
}

• 優點: 符合閉合浮動思想,結構語義化明確
• 缺點: ie6~7不支持after

4) 使用雙偽元素清除浮動

使用方法:

.clearfix:before, .clearfix:after {content:"";display: table;
}
.clearfix:after {clear: both;
}
.clearfix {*zoom: 1;
}

• 優點: 代碼更簡潔
• 缺點: 由于IE6~IE7不支持:after, 使用zoom:1觸發hasLayout.

2.4 清除浮動總結

1. 父級沒高度
2. 子盒子浮動
3. 影響兄弟元素布局

清除浮動的方式	優點	缺點
額外標簽法(隔墻法)	通俗易懂,書寫方便	添加許多無意義的標簽,結構化較差
父級overflow: hidden	書寫簡單	溢出隱藏
父級偽元素	結構語義化正確	兼容性問題(ie6~ie7)
父級偽元素	結構語義化正確	兼容性問題(ie6~ie7