zoukankan      html  css  js  c++  java
  • css float 浮动是个混球

    得说,在学习 CSS 的时候就一直在疑惑,横排布局干嘛要用 float 这种属性,

    用了还会高度塌陷,怎么不发明些高级点的属性来完成横排布局呢,

    甚至所有人都告诉我摒弃表格布局,浮动布局才是 DIV+CSS 时代的产物。

    以前我是没得选,现在想想,都过去这么多年了,也许我应该回去看看。

    其实当时制定 CSS 的人也许根本就没想过会用 float 来布局,最多来个 word 的那种文本环绕就不错了,

    或者说布局本来不是 float 的本职工作,你听过建房子有可能用左右浮动这种办法的吗...

    即便如今有多种方法去解决高度塌陷,

    比如 overflow: hidden 对布局造成的影响,等你遇到了你就会发觉这家伙神烦了,本来想露出的部分结果露不出来了,呵呵呵呵。

    另一方面,个人认为随着时代变化,网页的交互需求会翻倍增加,不只停留在搭建和布局上,还将有更多动效/微数据上的突破,

    所以 :before 和 :after 将会有更多应用,拿来清除浮动实在是大材小用了。

    而相对而言,inline-block 仿佛更像是为横排布局而设计的。inline 是行,block 是块,一行里的方块。

    可惜的是,它的兼容性实在不忍吐槽,

    要么底部有缝隙,需要 vertical-align,

    要么左右有缝隙,而 font-size:0 并不适用 chrome,letter-spacing: -2px 的数值其实并不稳定,有时候还会需要 -4px。

    从冠冕堂皇回到对 float 的吐槽...

    浮动布局就像是先伤己后伤人,一挥刀自宫把自己脱离文档流,再一反手影响别人,而且出招别扭。

    浮动时我们多半要使用定宽,拿定宽去进行响应式设计时,栅栏布局已经很不灵活了(即便是百分比),稍微改大号字体可能整个布局就崩了。

    曾经试着写类库的时候就希望将 logo+搜索框+菜单按钮 这样的三栏布局的样式类化,呵呵,最终我放弃了 float 动用了 absolute 来实现垂直居中,发现甚至还不如 table-cell 方便。

    这也许就是为什么 twitter 等公司互联网老大哥还在使用表格布局的部分原因吧。

    另一方面,float 与 absolute 同是脱离文档流,但 flost 还是能影响其他元素,所以说 float 脱离得并不彻底,因此在重绘和回流时 float 将比 absolute 更烧。

    其次由于浮动的效果,很多效果也就难以同时产生了,比如垂直居中/子级等高/元素排序等等...

    不知是不是幸运降临,float 难得的很容易理解,兼容又不错,有类库后使用也比较方便,实在是这个急功近利的时代容易接受的。

    但不管怎样,布局终究不是它的本质工作,甚至让它成为了这个时代的主流,回头想想还是有些可怕的。

    或许你没有体会过 表格布局/定位布局/浮动布局/栅栏布局 的优劣不同,不知道他们在开发和维护上所消耗的成本精力的差别;

    有些人也知道浮动这个属性能不用就不用,但是由于找不到更好的替代方法,回头想想又是可悲的。

    想来 CSS3 的开发者也发现了这个问题,而推出了 flexbox 这种布局方式,很大程度上完善了布局功能。

    它分三个阶段: box(最老,如今兼容不怎么好)/ flexbox(过渡,流传不广)/ flex(最新),及其 inline 形态(即 inline-box/inline-flex 等)。

    (以前是资料看得不多,一直不敢写,但最近装逼过头了发了大话被老大抓住话头了,只好赶鸭子上架了,还请爸爸们轻喷。)

    flex 布局的中文名称十分的美妙:自动布局/弹性布局/伸缩容器,光看这名字就已经觉得超屌了。

    它确实拥有以往布局难以企及的灵活性,在它的领域里基本就可以完全抛弃 float 和 table 了,因为它们能做的(单指布局),flex 肯定能做。

    而且兼容性出乎意料地好,基本本人接触到的设备都兼容了 flex。

    flex 是 display 的属性值,这才是行块布局的正统啊,它规定了该元素就是一个伸缩盒,是不是相比 float 等更语义了呢。

    就如同 display 其他属性值一样,每个盒模式都有其特殊的样式效果,如 inline 会失去高度,tabel-cell 会拥有一部分表格的特性,

    display: flex 伸缩容器使其子级变成了伸缩项目,拥有了直接横排布局,抢占空隙/自动宽度,自动高度,可排序,可靠齐等功能,

    在此就不赘述各个属性的样式效果了,随便搜搜都能比我讲的好,比如我就爱看这篇

    再说 flex 的弊端方面:

    想将 flex 布局像栅栏布局那样类化,个人认为难度很大,

    比如 .flex-row {dispaly:flex} .flex-row>*{flex-grow:1} 能产生横排子级全等宽的效果,但当遇上需要一个定宽值得时候,这又得加上 flex-shrink:0;

    设为Flex布局以后,子元素的 float / clear 和 vertical-align 属性将失效,这会使得与其他布局方式/类库冲突,请提前考量。

    其次 CSS3 新属性对旧属性的影响也偶尔发生,鄙人正在收罗中...

     float 是一种流传很广的布局方式,栅栏布局也非常适用于快速的结构开发,

    所以我从来不去抵制使用 float,但随着我们对更多布局样式的了解和实践,总有一天,我们将选择更好的,而慢慢忘记了这个偏房...

  • 相关阅读:
    php之curl实现http与https请求的方法
    Linux学习之CentOS(十)--虚拟机下的CentOS如何上网
    php--yii2框架错误提示
    Vmware安装与VMware下Linux系统安装
    Git命令
    PHP--yii中findOne转换成数组
    Window上装PHP开发环境 (XAMPP)
    yii2.0框架中session与cookie的用法
    【网站架构】从简单到复杂,一步步演变
    nginx 配置反向代理,负载均衡实战解析
  • 原文地址:https://www.cnblogs.com/foreverZ/p/no-float-is-better.html
Copyright © 2011-2022 走看看