### 一. 有无浮动的呈现效果 ``` <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都浮起来, 父元素无法被撑起来，那么如何清除浮动呢，下章再见。