float 与 元素放置小细节

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

浮动元素放置问题

    <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后发现

此时的.right到了浮动层 浮动就是个带有方位的display:inline-block属性--张鑫旭 似乎在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 clear="all">
复制代码

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

<br clear="all" style="display:inline;line-height=25px">
复制代码