G5德軍

一、浮動(float)

網頁布局的本質---用CSS來擺放盒子，把盒子放到相應位置

　　　　　　{1.標準流（最基本的布局網絡的方式）

　　　　　　標簽按照規定好默認方式排列

　　　　　　2.定位

　　　　　　3.浮動}

1.格式：float:left/right

2.浮動特性(point)

(1)脫離標準流,俗稱脫標

(2)浮動的盒子不再保留原先的位置(p173還有30秒沒看)

二、常見網頁布局

1.標準流盒子、左右盒子

2.浮動布局注意點

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

先用標準流的父元素排列上下，之后內部子元素采取浮動排列左右位置

（2）一個元素浮動了，理論上其余兄弟也要浮動

①一個盒子里面有多個盒子，如果其中一個盒子浮動了，那么其他兄弟也應該浮動，以防止引起問題

②浮動的盒子只會影響浮動盒子后面的標準流，不會影響后面的標準流。

三、清除浮動

由于父盒子在很多情況下，不方便給高度，但是子盒子浮動又不占有位置，最后父級盒子高度為0時，就會影響下面的標準流盒子。

1.額外標簽法

2.父級overflow

3.父級after偽元素

4.父級雙偽元素

四、PS切圖

五、學成在線案例