浮动：CSS布局的隐藏力量

发表时间: 2021-08-10 12:34

1. 前言

CSS世界中的float属性是一个年代非常久远的属性。虽然最初创造浮动并不是为了用于页面布局，但它在布局方面表现得很出色。然而为了理解浮动，我们首先必须牢记它的设计初衷。Web诞生之初，带宽就那么一点点，我们能够做到的也只是展示文字以及零星图片而已，怎么可能浮动设计的目的就是为了实现各种砖头式的复杂布局呢？那个年代复杂布局都是用<table>实现的。既然这样，那float属性设计的目的究竟是什么呢？

2 浮动的本质

很简单，一句话：浮动的本质就是为了实现文字环绕效果。而这种文字环绕，主要指的就是文字环绕图片显示的效果。所以，大家应该也多少对为什么老IE浏览器与浮动相关的bug一火车都装不下有些了解了吧！人家的功能本来就很单纯，只是让文字可以绕着图片跑，你偏要各种布局，结果撑不住了吧！

所以说：浮动是魔鬼，少砌砖头、少浮动，要更多地去挖掘CSS世界本身的“流动性”和“自适应性”，以构建能够适用于各种环境的高质量的网页布局。好的网页应该如同好的建筑。传统的楼房是典型的“刚”式结构，砖头加楼板，问题不言而喻，一个小小的地震可能就被夷为平地；而好的楼房应该是有“柔”在其中，也就是高质量的钢筋结构，当地震导致房屋摇晃的时候，可以通过钢筋的“柔性”卸力而保障整体结构的稳固。台风袭来，很少见到说柔弱的柳树被吹倒，反而会经常看到坚固的电线杆被风吹倒的消息，道理其实也类似。

3 浮动的特性

浮动有三个关键字可以选择，left为向左浮动，right为向右浮动，none为不浮动。无论是行内元素（inline）还是块级元素（block），设置浮动后都会变成块级元素。但表现得却更像行内块元素（inline-block），因为在没有明确宽度的时候，宽度会随着内容自适应，而不是占据一行。

过去，浮动的行为经常受到浏览器bug的干扰，特别是在IE6和IE7中。幸亏这些浏览器几乎已经淡出市场了，我们不必再担心那些bug了。现在我们可以保证各种浏览器对浮动的处理是一致的。但是浮动仍有一些行为会让你措手不及。这些并不是bug，而是因为浮动严格遵循了标准。让我们来看看浮动如何工作，以及怎样调整浮动的行为来实现理想的布局。

float都有哪些有意思的特性呢？具体如下：

包裹性

所谓“包裹性”，由“包裹”和“自适应性”两部分组成。包裹假设浮动元素父元素宽度180px，浮动元素子元素是一个120px宽度的图片，则此时浮动元素宽度表现为“包裹”，就是里面图片的宽度120px，代码如下：

.div { width: 180px; }.float { float: left; }.float img { width: 120px; }<div class="div"> 　    <div class="float">　　        <img src="float.jpg">　     </div></div>

自适应性，如果浮动元素的子元素不只是一张120px宽度的图片，还有一大波普通的文字，例如：

<div class="father">    <div class="float">　　         <img src="float.jpg">大家好，我是码农洞见。　    </div></div>

则此时浮动元素宽度就自适应父元素的180px宽度，最终的宽度表现也是180px。

块状化并格式化上下文

块状化的意思是，元素一旦float的属性值不为none，则其display计算值就是block或者table。

破坏文档流

float通过破坏正常CSS流实现CSS环绕，带来了烦人的“高度塌陷”的问题，然而，凡事都具有两面性，只要了解透彻，说不定就可以变废为宝、化腐朽为神奇。例如。我们可以利用float破坏CSS正常流的特性，实现两栏或多栏的自适应布局。

4 清除浮动

浮动会影响周围元素，并且还会引发很多意想不到的问题。在CSS中，我们可以使用clear属性来清除浮动带来的影响。clear属性语法如下：

clear: none | left | right | both

在实际开发中，我们几乎不会使用“clear:left”或“clear:right”来单独清除左浮动或右浮动，往往都是直截了当地使用“clear:both”来把所有浮动清除，既简单又省事。也就是说，我们只需要记住“clear:both”就可以了。

5 总结

通过阅读本文我们了解到浮动的设计初衷是让文字围绕一个元素排列，但有时这种效果并不是我们想要的。使用清除浮动来包含浮动元素。所谓生生相克，既然有破坏，就有保护其他元素不被破坏的属性。总之，只有深入理解浮动的工作原理，勤加练习才有可能避开常见的陷阱。达到选择合适的工具来实现想要的效果。

6 最后的最后

为初学者提供学习指南，为从业者提供参考价值。我坚信码农也具有产生洞见的能力。关注【码农洞见】，一起学习和交流吧！