### 一. 有無浮動的呈現效果 ``` <div class="parent"> <div class="one"></div> <div class="two"></div> </div> ``` ``` .parent { border: 1px solid black; } .one { width: 100px; height: 100px; background: aquamarine } .two { width: 200px; height: 100px; background: yellowgreen; } ``` 此時沒有浮動時，呈現的效果如圖：  給`div.one`加上浮動效果: ``` .one { width: 100px; height: 100px; float: left; background: aquamarine } ``` 此時顯示效果：  此時`.one`浮動，`.two`向上占據位置，因此有100px被.one遮住 ### 二. 浮動元素margin關系 1.div.one浮動后, 未浮動的`.two`的margin-left不會相對于`.one`，而是父元素，如： ``` .one { margin-left: 20px; } .two { margin-left: 130px; } ```  2.而當`.two`也設置為浮動時，margin-left相對于`.one`，而不是父元素，如： ``` .two { float: left; margin-left: 20px; } ```  此時發現，因為`.one`, `.two`都浮動了，所以div變成了一個"空"容器，只剩下邊框。 3.我們再加上一個子元素`.three`, 各方面數值與`.three`一致： ``` .three { width: 100px; height: 100px; background: burlywood; } ``` 此時，因為`.three`沒有設置浮動，而前兩個div又"浮"了起來，所以會貼著父div，如圖：  并且.three有一部分內容被.two遮住。 那么我們現在將`three`也設置成浮動效果會發生什么呢？ ``` .three { float: left; } ```  與我們猜測的一樣，`.three`會貼著`.two`，并且由于三個div都浮起來, 父元素無法被撐起來，那么如何清除浮動呢，下章再見。