文件流（百度百科）

將窗體自上而下分成一行行, 並在每行中按從左至右的順序排放元素,即為文件流.(自己的理解是從頭到尾按照文件的順序，該在什麼位置就在什麼位置，也可以按照上面的意思理解，自上而下，自左到右的順序)

詳細說明：比如網頁的div標籤它預設佔用的寬度位置是一整行，p標籤預設佔用寬度也是一整行，因為div標籤和p標籤是塊狀物件。 網頁中大部分物件預設是佔用文件流，也有一些物件是不佔文件流的，比如表單中隱藏域。當然我們也可以讓佔用文件流的元素轉換成不佔文件流，這就要用到CSS中屬性position來控制。 看看CSS 2.0對position的定義：檢索物件的定位方式。共有5個取值。 static：預設值，無特殊（靜態）定位。物件遵循HTML定位規則 。 absolute：

絕對定位。將物件從文件流中拖出，使用left，right，top，bottom等屬性相對於其最接近的一個具有定位設定的父物件進行絕對定位。如果不存在這樣的父物件，則依據body物件。而其層疊通過z-index屬性定義 。當物件定位在瀏覽器視窗以外，瀏覽器因此顯示滾動條。 fixed：固定定位。物件定位遵從絕對(absolute)方式。但是要遵守一些規範。當物件定位在瀏覽器視窗以外，瀏覽器不會因此顯示滾動條，而當滾動條滾動時，物件始終固定在原來位置。 relative：相對定位。物件不可層疊，但將依據left，right，top，bottom等屬性在正常文件流中偏移位置。當物件定位在瀏覽器視窗以外，瀏覽器因此顯示滾動條。 inherit：繼承值，物件將繼承其父物件相應的值。

標準文件流

巨集觀的講，我們的web頁面和photoshop等設計軟體有本質的區別：web頁面的製作，是個“流”，必須從上而下，像“織毛衣”。而設計軟體，想往哪裡畫個東西，都能畫。

我們要看看標準流有哪些微觀現象：

1） 空白摺疊現象：

比如，如果我們想讓img標籤之間沒有空隙，必須緊密連線：

<img src="images/0.jpg" /><img src="images/1.jpg" /><img src="images/2.jpg" />

2） 高矮不齊，底邊對齊：

3） 自動換行，一行寫不滿，換行寫。

塊級元素和行內元素

標準文件流等級森嚴。標籤分為兩種等級：

1） 塊級元素

● 霸佔一行，不能與其他任何元素並列

● 能接受寬、高

●如果不設定寬度，那麼寬度將預設變為父親的100%。

2） 行內元素

● 與其他行內元素並排

● 不能設定寬、高。預設的寬度，就是文字的寬度。

在HTML標籤中，分為文字級、容器級。

文字級：p、span、a、b、i、u、em

容器級：div、h系列、li、dt、dd

CSS的分類和上面的很像，就p不一樣：所有的文字級標籤，都是行內元素，除了p，p是個文字級，但是是個塊級元素。所有的容器級標籤都是塊級元素。

塊級元素和行內元素的相互轉換

塊級元素可以設定為行內元素，行內元素可以設定為塊級元素

1. div{
2. display: inline;
4. width: 500px;
5. height: 500px;
6. }

display是“顯示模式”的意思，用來改變元素的行內、塊級性質，inline就是“行內”。一旦，給一個標籤設定display: inline;

那麼，這個標籤將立即變為行內元素。此時它和一個span無異：

1、此時這個div不能設定寬度、高度；

2、此時這個div可以和別人並排了

同理：

1. span{
2. display: block;
3. width: 200px;
4. height: 200px;
6. }

“block”是“塊”的意思

讓標籤變為塊級元素。此時這個標籤，和一個div無異：

1、此時這個span能夠設定寬度、高度；

2、此時這個span必須霸佔一行了，別人無法和他並排；

3、如果不設定寬度，將撐滿父親

由於在標準文件流中，我們無法同時設定div並排，並且可以設定寬高，要做到這點，就需要脫離標準文件流，脫離標準文件流的三種手段：

1、浮動

2、定位

3、固定定位

--------------------------------------------------------------------------------------分割線-------------------------------------------------------------------------------------

浮動（浮動的性質：脫標、貼邊、字圍、收縮）

浮動是css裡面佈局用的最多的屬性。

1. .box1{
2. float: left;
3. width: 300px;
4. height: 400px;
6. }
7. .box2{
8. float: left;
9. width: 400px;
10. height: 400px;
12. }

兩個元素並排了，並且兩個元素都能夠設定寬度、高度了（這在剛才的標準流中，不能實現）。

浮動的元素脫標

一個span標籤不需要轉成塊級元素，就能夠設定寬度、高度了。所以能夠證明一件事兒，就是所有標籤已經不區分行內、塊了。也就是說，一旦一個元素浮動了，那麼，將能夠並排了，並且能夠設定寬高了。無論它原來是個div還是個span。

1. span{
2. float: left;
3. width: 200px;
4. height: 200px;
6. }

浮動的元素互相貼靠

如果有足夠空間，那麼就會靠著2哥。如果沒有足夠的空間，那麼會靠著1號大哥。如果沒有足夠的空間靠著1號大哥，自己去貼左牆。

右浮動同左浮動

浮動的元素有“字圍”效果

1. <div>
2. <img src="images/1.jpg" alt="" />
3. </div>
4. <p>123文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文文字
5. 文字文字文字文字文字文字文字文字文字文文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文
6. 字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文文字
7. </p>

讓div浮動，p不浮動：本來讓div擋住了p，但是由於文字的字圍效果，p中的文字並沒有被遮擋，而是包圍了div

關於浮動，需要注意的是：永遠不是一個東西單獨浮動，浮動都是一起浮動，要浮動，大家都浮動。

浮動的元素有“收縮”的效果

收縮：一個浮動的元素，如果沒有設定width，那麼將自動收縮為文字的寬度（這點非常像行內元素）。

比如：

整個網頁，就是通過浮動，來實現並排的。

浮動的清除

來看一個實驗：現在有兩個div，div身上沒有任何屬性。每個div中都有li，這些li都是浮動的。

1. <div>
2. <ul>
3. <li>HTML</li>
4. <li>CSS</li>
5. <li>JS</li>
6. <li>HTML5</li>
7. <li>設計模式</li>
8. </ul>
9. </div>
11. <div>
12. <ul>
13. <li>學習方法</li>
14. <li>英語水平</li>
15. <li>面試技巧</li>
16. </ul>
17. </div>

我們本以為這些li，會分為兩排，但是，第二組中的第1個li，去貼靠第一組中的最後一個li了。

原因就是因為div沒有高度，不能給自己浮動的孩子們，一個容器。

清除浮動方法

方法1：給浮動的元素的祖先元素加高度。

如果一個元素要浮動，那麼它的祖先元素一定要有高度。高度的盒子，才能關住浮動。

只要浮動在一個有高度的盒子中，那麼這個浮動就不會影響後面的浮動元素。所以就是清除浮動帶來的影響了。

方法2：clear:both

網頁製作中，高度height很少出現。為什麼？因為能被內容撐高！那也就是說，剛才我們講解的方法1，工作中用的很少。腦洞大開：能不能不寫height，也把浮動清除了呢？也讓浮動之間，互不影響呢？

<div> <ul> <li>HTML</li> <li>CSS</li> <li>JS</li> <li>HTML5</li> <li>設計模式</li> </ul> </div> <div class="box2"> → 這個div寫一個clear:both;屬性 <ul> <li>學習方法</li> <li>英語水平</li> <li>面試技巧</li> </ul> </div>

clear就是清除，both指的是左浮動、右浮動都要清除。意思就是：清除別人對我的影響。

這種方法有一個非常大的、致命的問題，margin失效了。


方法3 隔牆法

1. <div class="box1">
2. <ul>
3. <li>HTML</li>
4. <li>CSS</li>
5. <li>JS</li>
6. <li>HTML5</li>
7. <li>設計模式</li>
8. </ul>
9. </div>
11. <div class="cl h16"></div>
13. <div class="box2">
14. <ul>
15. <li>學習方法</li>
16. <li>英語水平</li>
17. <li>面試技巧</li>
18. </ul>
19. </div>

1. .cl{
2. clear: both;
3. }
4. .h16{
5. height: 16px;
6. }

還有一種演變的方式：內牆法

方法4 overflow:hidden

overflow就是“溢位”的意思，hidden就是“隱藏”的意思。

本意就是清除溢位到盒子外面的文字。但是，前端開發工程師又發現了，它能做偏方。

一個父親不能被自己浮動的兒子，撐出高度。但是，只要給父親加上overflow:hidden; 那麼，父親就能被兒子撐出高了。這是一個偏方。

1. div{
2. width: 400px;
3. border: 10px solid black;
4. overflow: hidden;
5. }

原作者：https://blog.csdn.net/u014727260/article/details/54808760?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param