关于浮动与html的排版关系

这是一个很奇妙的现象，更加奇妙的是我现在才注意到这个问题。

浮动经常用了，就按照习惯来用，不会再去想其它的用法。

下面是一段html代码。（啊啊啊啊，我终于懂得在这里插入代码的方法了。开心~）

<div class="one"></div>
<div class="two"></div>
<div class="fr"></div>

　它的样式如下，这样的的排版方法，会把浮动项，挤到下一行。

<style type="text/css">
div{ width:50%;}
.fr{ float:right; background:#999;height:50px; }
.one{ background:#666; height:25px; }
.two{ background:#333; height:25px; }
</style>

　值得注意的是，同样的样式，不一样的html排版，显示效果也会不一样。如果把浮动项，右浮动的div移至第一。

<div class="fr"></div>
<div class="one"></div>
<div class="two"></div>

one和two就能跟浮动块并列了。　

虽然想不明白。但是记下来先。　

　

转载于:https://www.cnblogs.com/ihqn19/archive/2013/05/10/3071682.html