前端随笔

Posted 2020-06-13

       学习前端的同学都知道，前端需要调试各种不同的浏览器以及浏览器的兼容性，以使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等等来最大限度的节约资源，减少流量的消耗，提升浏览器的反应速度，这才是王 道。
      以上，仅为自己观点，欢迎发表意见，一起讨论。