问题描述
今天做项目，要实现一个简单的页面UI，如下图显示：
很简单的需求，就是实现左右分布的样式。脑子中瞬间有了一个方案：
How to do
-
今日数据 和 更新时间 文案以正常的
span排布 -
推广房源量 和 新增推广房源 文案以
span向右浮动
So easy，happy coding...，话不多说，talk is cheap show me your code:
<div class="statistics-banner">
<span class="banner-head">今日数据</span>
<span class="upd-time">更新时间：2017-2-14 14:30:00</span>
<span class="qty">新增推广房源量：100</span>
<span class="qty house-qty">推广房源量：80</span>
</div>
.statistics-banner {
padding: 0 20px;
line-height: 60px;
border: 1px solid #ccc;
margin-bottom: 20px;
}
.banner-head {
font-size: 18px;
}
.upd-time {
margin-left: 30px;
font-size: 12px;
color: #999;
}
.qty {
float: right;
color: #666;
font-size: 14px;
}
.house-qty {
margin-right: 30px;
}
算了一下时间，十分钟不到就搞定，真高效。打开浏览器看看吧，
Chrome浏览器一切正常，
Firefox一切正常，
IE8-10一切正常，
IE7一切正常，
wait，
这是什么鬼？
为什么本该右浮动的文案出现了下一行中？
我第一个想到的问题就是IE7下是不是要触发一下hasLayout呢？
于是我在.statistics-banner中添加了一行代码：
.statistics-banner {
padding: 0 20px;
line-height: 60px;
border: 1px solid #ccc;
margin-bottom: 20px;
overflow: hidden; // 触发IE7下hasLayout
}
IE7下刷新页面（温馨提示：Ctrl + F5强刷一下哦），可是结果还是老样子，are u kidding me?
到底什么原因呢？是不是在IE7下面用float: right就会出现这个bug呢？做个试验吧
实验代码：
<div class="wrap">
<span class="title">Title</span>
<span class="desc">Second Text</span>
<span class="hint fr">Right align text</span>
</div>
.wrap {
background: #ccc;
line-height: 24px;
}
.wrap span{
font-size: 16px;
}
.title {
font-weight: 700;
}
.desc{
color: red;
}
.hint{
color:#62ab00;
}
.fr {
float: right;
}
看看结果吧！不抽风的浏览器是这样的：
抽风浏览器（你懂我说的谁）：
先说明一下这个问题吧，在一个容器中使用float:right元素，只要它不在第一的位置，它就会出现这个另起一行显示的bug，至于为什么说只要它不在第一的位置就会出现这个问题，下面的内容会让你更觉得怪异。
解决方案
既然出现了这个问题，我们总是要解决的，查阅了一些资料后，有了三个基本方案：
1.把容器中的右浮动元素放在第一的位置
即css代码不需要任何修改，只需要修改html代码：
<div class="statistics-banner">
<span class="qty">新增推广房源量：100</span>
<span class="qty house-qty">推广房源量：80</span>
<span class="banner-head">今日数据</span>
<span class="upd-time">更新时间：2017-2-14 14:30:00</span>
</div>
但是这种解决方案显然破坏了html的语义化，毕竟代码给人看的，也不利于后期维护
2.容器内的子元素全部浮动处理
<div class="statistics-banner clearfix">
<span class="fl banner-head">今日数据</span>
<span class="fl upd-time">更新时间：2017-2-14 14:30:00</span>
<span class="fr qty">新增推广房源量：100</span>
<span class="fr qty house-qty">推广房源量：80</span>
</div>
.clearfix:after {
visibility: hidden;
display: block;
font-size: 0;
content: " ";
clear: both;
height: 0;
}
.clearfix{
*zoom:1;
}
.fl {
float: left;
}
.fr {
float: right;
}
3.不使用浮动，使用绝对定位
这种方案就是规避float在IE67中的bug
.statistics-banner {
position: relative;
// more...
}
.qty {
position: absolute;
right: 20px;
// more...
}
.house-pty {
right: 50px;
}
这种方案会比较麻烦，你需要明确位置信息。
问题根本原因
IE67下之所以会出现这样的问题，归根结底还是历史遗留问题，因为IE67的页面布局方案是先于标准布局的，当在容器中使用浮动元素时，它会影响到它的兄弟节点，它会把左兄弟元素当做block元素来处理，因此浮动会另起一行
