html float 自动换行,解决IE7下设置float:right时元素自动换行异常情况

[摘要]

IE7浏览器下，本该并排显示的块状元素，添加了float:right属性后，浮动元素自动换行了，本文介绍解决办法。

不得不说IE是个让人又爱又恨的产品，对于前端开发者来说，IE系列版本的兼容性问题最令人头痛，今天笔者在工作中发现一个IE7下的浮动异常情况：本来想让两个块元素并排在一行，但在给右面的元素添加float:right属性后，右面的元素在IE7下换行了。

程序猿眼中的IE浏览器

例如：

• 我是左边/li>
• 我是右边

ul li{display:inline-block;}

.test{float:right}

理想情况下左边和右边应该在一排，而在IE7下，右边会另起炉灶，另起一行。

原因分析

在部分浏览器下，当非float的元素和float的元素在一起的时候，如果非float元素在先，那么float的元素将被排斥。

解决办法

1、将含有float属性的元素置于最前，也就是说将右边的

写到左边的之前。

2、给非float元素添加float属性。

这样处理之后，页面就会在IE7下正常显示了。

本文最后更新于2018年12月14日，已超过 1 年没有更新，如果文章内容或图片资源失效，请留言反馈，我们会及时处理，谢谢！