今日隊友問我一問題，浮動的位置關系。具體如下圖
浮動元素放置問題
浮動問題圖1
<div class="box1"></div>//深灰色
<div class="box2">
<div class="left"></div>//淺灰色
<div class="no-float"></div>//被left覆蓋
<div class="right"></div>//米黃色
</div>
.right的盒子已經被擠壓到下一行了，明顯不是寬度問題。經過調試發現。是．no-float是塊級元素，占了一整行。在給no-float添加inline-block后發現
浮動問題圖2
此時的.right到了浮動層
浮動就是個帶有方位的display:inline-block屬性--張鑫旭
似乎在html中放在前面的浮動元素才會脫離文檔流繼而覆蓋其他未浮動元素
解決方案
浮動塊和浮動塊放在一起，才可以浮動在同一個文檔流上。
清除浮動
設置浮動元素時，父元素不能隨著浮動元素的增大而增大
錯誤圖
html
背景顏色為是灰色，可以看出右邊浮動的元素超出了main盒子
我想要的效果
![效果圖]M7YRIG_I%]TD}PCJT.png](http://upload-images.jianshu.io/upload_images/1318539-6dd748b5aa3fca1b.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
所以此刻就要清楚浮動啦~
清除浮動最好方法
方法
在上文基礎上添加一個方法
4.在浮動元素后加偽類 ：after
class設置
最終使用了
<br clear="all">
br標簽會產生換行，默認有個最小高度。如果要改變br的高度
寫法如下。google中最小高度為25px。
<br clear="all" style="display:inline;line-height=25px">
