我們在設置浮動元素時往往會出現這樣的現象，由於兩個浮動元素寬度之和大於父元素的寬度而導致第二個浮動元素被擠到下面，就像下面這樣。
<body> <div class="parent"> <div class="left"></div> <div class="right"></div> </div> </body>
.parent{ background-color: skyblue; height: 120px; } .left{ width:500px; height: 100px; float: left; background-color: plum; } .right{ height: 80px; width: 700px; float: right; background-color:yellow; }
當頁面足夠寬時，兩個浮動元素還可以共存在一行，一旦頁面縮小，就會出現此現象。究其原因是因為父元素parent未設置寬度從而繼承了body的寬度，即width:100%，頁面呈現多寬，父元素就多寬。
我這里的解決方法是設置父元素parent的width屬性大於兩個子元素的寬度之和，這樣浮動的子元素就只能一直在父元素中存在。