首页 > 代码库 > 如何理解CSS中的浮动 :其实他就像乘坐扶梯一样

如何理解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(编译)

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