今日队友问我一问题，浮动的位置关系。具体如下图
浮动元素放置问题
浮动问题图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](https://img.haomeiwen.com/i1318539/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">
网友评论