学习前端的同学都知道,前端需要调试各种不同的浏览器以及浏览器的兼容性,以使ui展示的效果在浏览器中最大程度上接近活相似。但是我们常常遇到各种各样的bug.比如,明明设置了元素的高度,但是设置下一个元素的位置的时候,元素的位置就是错乱的。
时下比较流行的,瀑布流啊,响应式布局啊,第三方库啊(bootstrap,easyui)等等,不知道大家有没有发现,这些库以及这些库产生的原理,都跟float这个不起眼的属性息息相关,下面,我们来浅谈一下为什么float很重要的原因。
相信大家都知道,htm元素里面有块元素,和非块元素。当我们在设计网页布局的同时,我们首先要考虑的浏览器的差异性,所以就有了浏览器hack存在的作
用了。大家都用个*{margin:0;padding:0}类似这样的样式表。这就是为了解决浏览器自身携带的一些默认属性值差异,我们所做的同步操
作。做好了浏览器的差异同步,才能更好的书写html相关的代码。
拿瀑布流来说,最常见的就是百度图片这样的瀑布流形式。大家可以查看一下,每一个图片的样式(imgitem)都是带有float属性的。这样做有什么好
处呢?1.保证每一个li标签是宽度100%在每行出现的块元素;2.保证每个元素都是从左到右的展示顺序。这样,就可以撑起整个页面,也保证页面的高度
是饱和的,没有误差的。
再拿响应式布局来说,bootstrap是做的很好地响应式布局第三方库。同样,不管用的盒子模型也好,不用也好,也是基本的大块的元素都用到了float属性。为什么?我们来分析一下响应式布局的特点。
响应式布局,说白了,就是让页面自适应所有的分辨率,而且随着分辨率的改变,浏览器大小的改变而改变。做到这一点,bootstrap是这样来做的,将页
面均等的分成12列,每一列占对应的百分比(当然,不能除尽的),但是要如何保证在浏览器大小改变,分辨率改变的情况下自动的折行,分配比例呢?出去js
脚本的功用不说,要保证页面不错乱,适应不容的屏幕,显然,无论从排版上来说,还是布局上来说,float都是一个很好地选择。当然,配合
position属性,能够更好地发挥布局的相关作用。
pc端如此,移动端也是如此。当然,原生的layout布局就是另外一回事了。
我曾经,看过一篇文章,上面说移动端最好不要用float属性,我不敢苟同。其实,针对手机浏览器界面的开发,我反而觉得跟pc端没有那么大的区分,只不
过我们需要判断设备的类型,根据不同的设备,来调用不同的样式,图片,js等等来最大限度的节约资源,减少流量的消耗,提升浏览器的反应速度,这才是王
道。
以上,仅为自己观点,欢迎发表意见,一起讨论。