如何理解CSS中的浮动 ：其实他就像乘坐扶梯一样

　　只要你用过自动扶梯，你就能很快的理解CSS中的浮动(Float)。

　　你肯定遇到过这样的情况：

      做好了，你想用CSS浮动来调整元素间的位置关系。

　　在写完代码之后，你发现浮动元素没出现在你设想的位置，而且像个磁铁一样紧紧的靠在div旁边。

　　为了理解浮动这个概念，我个人曾经花费了很长的时间。有一次，我读到了一篇有关浮动的文章，觉得它说的很有道理，于是去尝试文章中的方法。但是写完代码之后，还是失败了……我也只好从头再来。

　　如今我已经成功的理解了这个概念，我也想要尽我最大的努力让其他人少走弯路。

　　浮动创建替代的流(flow)。这是浮动这个概念最难以理解的部分。在接触到这个概念之后，在写代码的时候，你需要将页面视为三个部分：左、中、右。对你来说，这是一个新的规则，以前你只需要调整元素的宽度或是定位，现在突然出现了流这个概念。

　　事实上，浮动和乘坐扶梯差不多。通过这样的理解，下次你在使用浮动的时候，可能就不会那么纠结了。

　　尊重通行规则

　　元素的默认流有点像上图中的情况。一个人站在扶梯正中间，一只手还放在扶手上，这样一来，他就霸占了整个通行空间，没人能从他身边超越。这种乘坐扶梯的方式挺没有公德的。

　　这个人前面的那些人，也都在这样站着，所以他也无法超越身前的那些人

　　在网页开发中，如果你不使用浮动，元素就像是这些不讲公德的人一样，占据着页面的通道。

　　而在使用了浮动之后，情况就会像是上面这张图一样，突然间秩序来了。

　　扶梯被分成左右两个通道，人们都站在边上，当有其他人需要快速通过的时候，这些人可以从左边或是右边绕开身前的人，实现快速通行。

　　没有人站在中间，因此没有人霸占着通道。

　　在div中使用浮动的时候，网页就是这样。页面中出现了左边流和右边流，你可以通过浮动给元素指定他们是要待在左边还是待在右边，而那些没有使用浮动的元素，则待在左边流和右边流之间的位置。

　　浮动：左边和右边

 

　　浮动带来的两个新概念：左边流和右边流。

　　没有使用浮动的元素，则待在文档流(normal flow)的位置上，也就是页面的中间部分。

　　浮动的作用，就是在各个流中创建这些新的关系。

　　如果所有人都站在扶梯的正中间，在对元素的架构进行调整时，你就会感到被处处掣肘。但是当出现了左边和右边的空间时，突然间你的选择就多了。你可以让一些人(元素)站在左边，一些站在右边，一些站在中间。

　　这样一来，你就可以让元素更加易于阅读和理解。

　　Clear属性

 

　　我们还有一个东西没有谈到：clear属性。这个属性允许元素声明元素的哪一侧不允许其他浮动元素。

　　在上图中，两个人站在电梯的左右两侧，这种站法能让后面的人更快的通行。

　　我们现在假设，要让3个人站在左边，一个人站在右边。

　　要想让3个元素站出现在左边流，我们可以给它们指定“clear: left”属性。但是如果这个三个元素是横向并排排列的，那么后面的元素就根本无法超越：

　　“Clear: left”的作用，是告诉每一个人都站在左边，而且要排在第一个人的身后。

　　clear属性最常见的用法为“clear:both”。它可以让你重设元素的流。有点像电梯上拿着行李箱的人：虽然依旧站在一侧，但是其行李箱还是堵住了中间的通道。

　　这个拿着行李箱的人重设了规则。对于后来的人来说可能是个坏消息，但是如果你想要阻止其他元素通过的话，这个行李箱却是一个不错的工具。

　　但是请注意，这个行李箱和文章第一张图的那个人不一样。在第一张图中，所有人都站在中间，整个扶梯上只有一个流。而这个行李箱(clear：both)虽然挡住了通道，但是整个扶梯上依然有3个流。

 

 

 

原文链接：https://www.sdk.cn/news/5259?utm_source=tuicool&utm_medium=referral

来源作者：Christian（编译）