网站自适应之清除标签的float浮动

编辑：狂族晨曦 来源：经验杂笔 日期：2016-04-09 阅读： 2,037 次 2 条评论 » 百度已收录

Float是我们在设计网站前端的时候，很常用到的一个CSS属性。我们常用它来让DIV等标签贴向左边或者右边。关于Float的用法，大家可以去看看w3school的介绍：

• w3school：CSS float 属性

其实Float共有4个用法，我们常用的方法是设置是下面这两种：

float:left;
float:right;

我们在设置不同分辨率CSS样式的时候，可以用float的right来替换left以达到某些设计上的要求，但是我们的要求是多变的。

先森在适配网站自适应的时候，就遇到了设置了左右浮动的标签，在更小分辨率想要将其设置为居中的状态的时候设置不成功的情况，这时先森就想让它的浮动效果清除掉。

清除左右浮动其实也很简单，上文说了Float共有4个用法，除了常用的左右浮动，还有两个用法分别是"none"和"inherit"。从字面意思上就可以看出它们的用法，分别是“没有”和“继承”。

在我们想要将其浮动清除的时候，只需要设置以下属性即可：

float:none;

关于Float的浮动，清除起来还是比较容易。但是关于定位的属性position的定位，如何清除它的影响先森还是没能琢磨的透。网上提出的有两种解决方法，一个是overflow，另一个是clear:both，只能看哪个有用设置哪个了。

网站自适应之清除标签的float浮动