CSS布局——浮动布局的迭起兴衰
从1994年浮动诞生到2022年IE退役，一部浮动布局统治WEB 20年的技术史。
（本文章部分数据可能不准确，且观点可能不成熟，请理性辨别）
先说结论：浮动能统治20年，是因为它在真空期被发现有用，然后建立了一个复杂的workaround生态，最后等到IE彻底退役才被真正被取代。
一、浮动伊始
1994年，网景浏览器Netscape Navigator率先实现浮动，随后，1998年1月，CSS2规范发布，float属性作为CSS官方标准的一部分被正式定义。
那时，浮动被用于图文环绕。有程序员发现，浮动的盒子可以和浮动的盒子水平排列。这似乎摆脱了原本局限很强的文档流。但当时浮动的支持还没那么广泛，且浮动的那些问题（例如父元素高度塌陷）尚未出现解决方法......
大约是2000年，该属性得到广泛支持。事实上，在这之前，很可能压根没有哪怕是我们这个页面的"圣杯布局"的需求（圣杯布局是2006年被提出并使用浮动解决的，并声称这是当时最好的办法了）。
二、浮动布局的"对手"
1. 表格布局
这算是个像样的对手。表格布局对比浮动而言，为了实现精细布局，需要大量嵌套表格（table套table），产生大量冗余代码，降低加载速度，难以维护。且在html里完全没有语义化。布局与内容耦合过紧，去掉哪怕一个内容，都要重做布局。
（未来我可能会写：DreamWeaver是如何延缓表格布局的消亡的——设计工具与编程软件的解耦）
2. 行内块
想到水平布局，大家不难想到一个叫行内块的东西。通常教你的老师会说，行内块不行，是因为那个致命空格......实则不然，这已经是最小的问题了，而且这对行内块不公平——你浮动可以搞一堆Workaround，凭什么我行内块不行？
我们一点点分析。
首先，最致命的是，行内块发布较晚。可以肯定的是，IE6完全不支持这功能。IE6更新的时候是2006年10月。且IE7好像也不完全支持。真正支持行内块的时候是IE8。这时候，浮动已经坐稳了，开发者们没必要为了这个玩意重新研发，毕竟，已经有了浮动这个相同功能的东西了，不如继续开发浮动。
此外，圣杯布局的那个技巧是06年出现的。同样的办法，行内块做不到（负margin无法把行内块拉回上一行）。也许聪明的你能找到办法，但......谁又有那个兴趣呢？既然前人已经踏出一条路，那跟着走不就行了？
3. 绝对定位
绝对定位，和浮动一起出来的......但，很明显......你当然可以强制的把每个元素都绝对定位上去......但，还是那个问题。你删除一个内容，其他的也要大改。
总结下来，你会发现，浮动似乎是当时最好的选择了。
三、浮动的黄金年代，同样蕴含着危机
我认为，浮动的黄金年代是1998年后一直到2015年的flex逐渐趋于稳定。随着浮动逐渐被支持，大量开发者对这个属性的发掘......从弊端（父元素高度塌陷）到"优势"（负边距可以换行回去），浮动正在趋于完善。如果没有乔布斯这帮开发智能手机的移动端的坏蛋，也许浮动会继续这样下去。
圣杯布局
圣杯布局，这个名字来源于西方宗教典故。象征着在网页布局领域追求的"完美三栏布局"目标。它最早由Matthew Levine在2006年提出，因实现难度高且效果理想而得名。
双飞翼布局
双飞翼布局，是圣杯布局的进阶布局。（双飞翼布局详解）可以点击链接来看，但其实大同小异（可对于浮动布局来说，我认为这是个不小的进步）。
响应式时代的挑战
在2009年前后，响应式网页设计（RWD）的概念开始普及，开发者亟需一种能快速适配不同屏幕尺寸的布局方案。同时期的CSS3 Flexbox和Grid规范还处于草案或早期实验阶段，远未达到可商用的稳定状态。此时，以Bootstrap为代表的前端框架应运而生，它将当时主流的布局技术——浮动和媒体查询——封装成一套易用的"网格系统"，让开发者仅需编写少量HTML类名（如.col-md-4）就能快速构建响应式页面。
上述实践，本质上是社区在现有标准约束下将浮动布局潜力挖掘到极致。人们清楚地认识到，用浮动做复杂布局是一种 "Workaround" ，它本不是为此设计的，因此存在诸多局限。
移动互联网革命
2007年1月9日，乔布斯发布了第一个iPhone手机。同年6月29日正式开售。
2008年9月23日，安卓系统发布。首个正式版Android 1.0随HTC Dream/G1手机上市。
苹果与安卓，共同开启了移动互联网时代。大量不同比例的手机横空出世......对于前端开发者而言，这简直是灾难——pc端固定的比例被打破——开发者不可能针对每种比例都做适配......如果继续使用浮动，不难想象，网页会变成什么灾难。
"响应式！我们需要自动化处理响应式！"开发者们说。
四、web布局的出路——现代布局
2009年，flexbox被首次提出。
2010年，grid被微软提出，IE10（2012年发布）率先实现旧语法。
这两大现代布局的神器在经历了几年的语法重构后，flexbox在2014年就已经几乎得到了所有浏览器的支持，最后和grid一起被发布于2017年的CSS3标准里。
现代布局的优势，我们已在当前的页面，以及先前的实践中得到验证。我们对他的感觉就是，他似乎和响应式适配天然耦合在一起......
我们回忆一下。Workaround那一篇文章（稍后我补上链接和文章），我们反复强调"父元素制定规则，子元素遵守规则"。事实确实是这样。开发者无论怎么做，实际上都是在"希望这一板块的内容整体水平居中"，而非"希望这一板块的内容恰好挤满一个大盒子，然后让盒子左右外边距一致"；我们希望的是"左中右三栏等高"，而非"左侧和右侧设置正无穷大底部内边距，和负无穷大底部外边距，最后要求父元素切掉多余部分（实际上这里依旧是父元素制定规则，只是过去的父元素没有让3栏等高的权限）"。
而现代布局，恰好就是允许开发者去制定规则，把计算这种"累活"交还给浏览器。
过去，媒体查询@media用来微调......现在，情况不同了！我们使用它更多是因为，当前的布局规则会导致某些内容过小（或过大），导致阅读不便......这才是响应式适配。
五、浮动的最后黄昏
按理说，浮动应该在2015年的弹性盒子成熟后就可以退役了。可到了2017年，正式标准都发布了，浮动还在咬牙坚挺......为什么？
IE浏览器。
被骂的很惨的IE。
据我搜索，从17年的浏览器全球份额可能还能吃到10%~26%，到22年已经不足2%......IE陈旧的内核"Trident"无法适应现代web。普通用户将其无情的抛弃。
可......许多老旧的业务系统（尤其是政府、金融、制造业）专门为IE开发，使用了大量IE独有的技术（如ActiveX、VBScript），更换浏览器会导致系统完全无法运行。
时间回到2001年。这时，IE刚"打赢"网景。微软是搞系统的，所以，与其说IE是浏览器，更像是一个捆绑销售的工具......微软开发的那些独有技术，对当时的企业而言，绝对是先进的。
到了2015年，IE早就像钢筋混凝土一样，浇筑进了全球金融、政务、企业核心系统的深处。2022年关停IE时，新闻报道，全球的企业大约有47%都用的IE......日本政府更是高达50%之上。
对于企业和政府的决策者而言，这些系统不是"网站"，而是仅在IE上才能运转的"生命支持装置"。他们的理性计算冰冷而清晰：替换这套装置，需要数千万的预算、数年的周期、不可估量的业务中断风险。而维持现状，成本似乎是"零"（除了那些分散的、难以归咎的安全风险与效率损耗）。
对于IE来说，IE没法掉头，而继续在老旧的Trident上开发，投入巨大，收获微小。经济学有个概念叫边际效应。很冰冷。他要求你不去计算过去的收益，而是看未来。未来就是，IE的开发成本远远大于收益。于是微软开启了一系列"软着陆"。
值得一提的是，在flexbox日益成熟的2015年，微软就公布了edge这个新项目。我认为，微软大概率在这之前几年就已经投入了。
2022年5月16日，微软宣布了IE的退役日期。
6月15日，IE正式退役。
为了确保依赖IE旧网站的用户（尤其是企业用户）不受影响，微软在Edge浏览器中内置了"IE模式"。该模式允许用户直接在新浏览器中打开需要IE内核的页面，其支持将至少延续到2029年，但这也变相告诉企业们：停止开发IE吧。
浮动布局在这一刻，也许才真正走进坟墓。
（本人是一个大一学生，学习前端的时间并不长……以上是我的一些思考，我其实学习前端的程度还不算深刻，但我实践着写了浮动和弹性盒子下的圣杯布局，有了不小的体会……）
我上传到了gitee上，欢迎下载来看！（注释很丰富的，内心戏强烈QwQ）gitee.com/jeyi08/floa…
