|
只要你用过自动扶梯，你就能很快的理解CSS中的浮动(Float)。
你肯定遇到过这样的情况：
做好了，你想用CSS浮动来调整元素间的位置关系。
在写完代码之后，你发现浮动元素没出现在你设想的位置，而且像个磁铁一样紧紧的靠在div旁边。 为了理解浮动这个概念，我个人曾经花费了很长的时间。有一次，我读到了一篇有关浮动的文章，觉得它说的很有道理，于是去尝试文章中的方法。但是写完代码之后，还是失败了……我也只好从头再来。 如今我已经成功的理解了这个概念，我也想要尽我最大的努力让其他人少走弯路。 浮动创建替代的流(flow)。这是浮动这个概念最难以理解的部分。在接触到这个概念之后，在写代码的时候，你需要将页面视为三个部分：左、中、右。对你来说，这是一个新的规则，以前你只需要调整元素的宽度或是定位，现在突然出现了流这个概念。 事实上，浮动和乘坐扶梯差不多。通过这样的理解，下次你在使用浮动的时候，可能就不会那么纠结了。
尊重通行规则
元素的默认流有点像上图中的情况。一个人站在扶梯正中间，一只手还放在扶手上，这样一来，他就霸占了整个通行空间，没人能从他身边超越。这种乘坐扶梯的方式挺没有公德的。 这个人前面的那些人，也都在这样站着，所以他也无法超越身前的那些人 在网页开发中，如果你不使用浮动，元素就像是这些不讲公德的人一样，占据着页面的通道。
而在使用了浮动之后，情况就会像是上面这张图一样，突然间秩序来了。 扶梯被分成左右两个通道，人们都站在边上，当有其他人需要快速通过的时候，这些人可以从左边或是右边绕开身前的人，实现快速通行。 没有人站在中间，因此没有人霸占着通道。 在div中使用浮动的时候，网页就是这样。页面中出现了左边流和右边流，你可以通过浮动给元素指定他们是要待在左边还是待在右边，而那些没有使用浮动的元素，则待在左边流和右边流之间的位置。
浮动：左边和右边
浮动带来的两个新概念：左边流和右边流。
没有使用浮动的元素，则待在文档流(normal flow)的位置上，也就是页面的中间部分。
浮动的作用，就是在各个流中创建这些新的关系。 如果所有人都站在扶梯的正中间，在对元素的架构进行调整时，你就会感到被处处掣肘。但是当出现了左边和右边的空间时，突然间你的选择就多了。你可以让一些人(元素)站在左边，一些站在右边，一些站在中间。 这样一来，你就可以让元素更加易于阅读和理解。
Clear属性
我们还有一个东西没有谈到：clear属性。这个属性允许元素声明元素的哪一侧不允许其他浮动元素。
在上图中，两个人站在电梯的左右两侧，这种站法能让后面的人更快的通行。 我们现在假设，要让3个人站在左边，一个人站在右边。 要想让3个元素站出现在左边流，我们可以给它们指定“clear: left”属性。但是如果这个三个元素是横向并排排列的，那么后面的元素就根本无法超越：
“Clear: left”的作用，是告诉每一个人都站在左边，而且要排在第一个人的身后。 clear属性最常见的用法为“clear:both”。它可以让你重设元素的流。有点像电梯上拿着行李箱的人：虽然依旧站在一侧，但是其行李箱还是堵住了中间的通道。
这个拿着行李箱的人重设了规则。对于后来的人来说可能是个坏消息，但是如果你想要阻止其他元素通过的话，这个行李箱却是一个不错的工具。 但是请注意，这个行李箱和文章第一张图的那个人不一样。在第一张图中，所有人都站在中间，整个扶梯上只有一个流。而这个行李箱(clear：both)虽然挡住了通道，但是整个扶梯上依然有3个流。 来源作者：Christian（编译）
|
