1、文檔流：

文檔流
文檔流處在網(wǎng)頁(yè)的最底層，它表示的是一個(gè)頁(yè)面中的位置，我們所創(chuàng)建的元素默認(rèn)都處在文檔流中

元素在文檔流中的特點(diǎn)
塊元素
1.塊元素在文檔流中會(huì)獨(dú)占一行，塊元素會(huì)自上向下排列
2.塊元素在文檔流中默認(rèn)寬度是父元素的100%
3.塊元素在文檔流中的高度默認(rèn)被內(nèi)容撐開(kāi)(垂直排列)
內(nèi)聯(lián)元素
1.內(nèi)聯(lián)元素在文檔流中只占自身的大小，會(huì)默認(rèn)從左向右排列，如果一行中不足以容納所有的內(nèi)聯(lián)元素，則換到下一行，繼續(xù)自左向右。
2.在文檔流中，內(nèi)聯(lián)元素的寬度和高度默認(rèn)都被內(nèi)容撐開(kāi)

當(dāng)元素的寬度的值為auto時(shí)，此時(shí)指定內(nèi)邊距不會(huì)影響可見(jiàn)框的大小，而是會(huì)自動(dòng)修改寬度，以適應(yīng)內(nèi)邊距

2、文字繞圖：

浮動(dòng)的元素不會(huì)蓋住文字，文字會(huì)自動(dòng)環(huán)繞在浮動(dòng)元素的周?chē)?，所以我們可以通過(guò)浮動(dòng)來(lái)設(shè)置文字環(huán)繞圖片的效果

float: left;

3、浮動(dòng)(塊-獨(dú)占一行)：

塊元素在文檔流中默認(rèn)垂直排列，所以這個(gè)三個(gè)div自上至下依次排開(kāi)
如果希望塊元素在頁(yè)面中水平排列，可以使塊元素脫離文檔流,使用float來(lái)使元素浮動(dòng)，從而脫離文檔流
可選值：
none，默認(rèn)值，元素默認(rèn)在文檔流中排列
left，元素會(huì)立即脫離文檔流，向頁(yè)面的左側(cè)浮動(dòng)(其下面的將其覆蓋)
right，元素會(huì)立即脫離文檔流，向頁(yè)面的右側(cè)浮動(dòng)(其下面的向上占位)

如果有兩個(gè)右/左浮動(dòng)，其兩個(gè)會(huì)橫向排
元素浮動(dòng)以后，會(huì)盡量向頁(yè)面的左上或這是右上漂浮，直到遇到父元素的邊框或者其他的浮動(dòng)元素
如果浮動(dòng)元素上邊是一個(gè)沒(méi)有浮動(dòng)的塊元素，則浮動(dòng)元素不會(huì)超過(guò)塊元素
浮動(dòng)的元素不會(huì)蓋住文字，文字會(huì)自動(dòng)環(huán)繞浮動(dòng)元素

4、內(nèi)聯(lián)元素的浮動(dòng)：

當(dāng)元素設(shè)置浮動(dòng)以后，會(huì)完全脫離文檔流.
塊元素脫離文檔流以后，高度和寬度都被內(nèi)容撐開(kāi)
開(kāi)啟span的浮動(dòng),內(nèi)聯(lián)元素脫離文檔流以后會(huì)變成塊元素

<span class="s1">hello</span>