float 与 元素放置小细节

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

浮动元素放置问题

浮动问题图1

    
//深灰色
    

        
//浅灰色
        
//被left覆盖
        
//米黄色
    

.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标签会产生换行，默认有个最小高度。如果要改变br的高度
写法如下。google中最小高度为25px。