今日队友问我一问题，浮动的位置关系。具体如下图

浮动元素放置问题

    
//深灰色    
    
        
     
//浅灰色        
     
//被left覆盖        
     
//米黄色    
    
复制代码

 .right的盒子已经被挤压到下一行了，明显不是宽度问题。经过调试发现。是．no-float是块级元素，占了一整行。在给no-float添加inline-block后发现

此时的.right到了浮动层 似乎在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

最终使用了

复制代码

br标签会产生换行，默认有个最小高度。如果要改变br的高度 写法如下。google中最小高度为25px。

复制代码