css样式中元素浮动问题学习记录

学习前端也有一段时间了，以前也看了一些有关浮动的知识，最近对浮动又有了新的理解，在此记录一下。

 浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

<div class="box1">
    box1
</div>
<div class="box2">
    box2
</div>

<style>
    .box1{ background: yellow; height: 40px; width: 300px}
    .box2{ background:pink; height: 40px; float: right}
</style>

结果很明显；

如果把box1换成span

<span class="box1">
    box1
</span>
<div class="box2">
    box2
</div>

box2 除了向右走之外还向上走，也就是说在box2之上并没有限制；

如果再span后面加上换行

<span class="box1">
    box1
</span><br />
<div class="box2">
    box2
</div>