當(dāng)父元素包含了兩個子元素埃叭，兩個子元素為浮動的各種情況。設(shè)置了粉色背景的是父元素砸逊，黃色背景的為第一個div元素璧南，綠色背景的為第二個div元素。
1.默認樣式是沒有浮動师逸，所以兩個塊級元素占了兩行司倚。
補充：
行內(nèi)元素和塊級元素的區(qū)別
1. 塊級元素會獨占一行，其寬度占滿父元素的寬度
行內(nèi)元素不會獨占一行篓像，相鄰的行內(nèi)元素會排列在同一行里动知，知道一行排不下，才會換行员辩，其寬度隨元素的內(nèi)容而變化
2） 塊級元素可以設(shè)置 width, height屬性盒粮，行內(nèi)元素設(shè)置width, ?height無效
【注意：塊級元素即使設(shè)置了寬度，仍然是獨占一行的奠滑，其余占據(jù)的位置由外邊距來填充】
3) 塊級元素可以設(shè)置margin 和 padding. ?行內(nèi)元素的水平方向的padding-left,padding-right,margin-left,margin-right 都產(chǎn)生邊距效果丹皱，但是豎直方向的padding-top,padding-bottom,margin-top,margin-bottom都不會產(chǎn)生邊距效果。（水平方向有效宋税，豎直方向無效）
2.因為第一個元素從正常的文檔流脫離了摊崭，所以第二個元素直接就跑上去了占據(jù)了整行的位置。為了方便顯示杰赛，我將第二個div的寬度設(shè)得比第一個的寬度大爽室。
2.1順便說一下文字環(huán)繞浮動元素的情況，在深綠色的容器中添加了文字，于是就變成了
我設(shè)置了深綠色的寬度是400嘿架，草綠色的寬度是300，由于文字（不換行的情況）的寬度少于100px啸箫，所以就在草綠色的div右邊耸彪。而這也是float元素和絕對定位元素的最大區(qū)別
試驗下：就把第二個元素的文字遮擋拉
如果元素同時設(shè)置了浮動和絕對定位仙蛉，則浮動是沒有效果的哦壹士。
3.因為第一個沒有設(shè)置float的元素正常占據(jù)了整行的位置潮售，所以第二個div只能乖乖地往下一行跑咯炸茧，因為元素是在文檔中是由上至下去排列的瞧省。
4.兩個元素按左到右排列
