清除浮动和闭合浮动的区别?

微博上看到的一个面试题?
图片描述

坐等高手回答。

阅读 11.1k
6 个回答

原来是一丝提出的“闭合浮动”。为了避免混淆,还是说全吧,“使float元素可以撑高父元素”。

(国内页面重构已经足够乱了还需要特地造个新名词混淆新人吗)


“清除浮动”源于clear float即W3C CSS2.1 9.5.2章定义的内容,意即使用clear阻止这个元素盒子的边和前面的浮动元素相邻的行为;

The most interesting characteristic of a float (or "floated" or "floating" box) is that content may flow along its side (or be prohibited from doing so by the 'clear' property).

如果“闭合浮动”指的是避免“float无法撑高父容器的默认行为”的话,那么有这些方案:

  • 在float同级最后方加入带有clear:both属性的元素或伪元素(W3C CSS2.1 9.5.2 clearance高度计算部分)
  • 给父级加上一些overflow/float/display table等触发BFC的属性以使父容器成为block formatting context roots(W3C CSS2.1 10.6.7)

10.6.7 'Auto' heights for block formatting context roots
In addition, if the element has any floating descendants whose bottom margin edge is below the element's bottom content edge, then the height is increased to include those edges. Only floats that participate in this block formatting context are taken into account, e.g., floats inside absolutely positioned descendants or other floats are not.

这种咬文嚼字的问题有意义吗?
我会告诉面试官,浮动有什么特点,会带来什么问题,如何解决这些问题,并提供多种方案,每一种适合的情景。

同觉得国内的很多前端工程师都喜欢创造一些名词,反正我是习惯直接说clearfix。而且面人你把遇到的场景描述出来,让人家提出解决方案就行了,没必要咬文嚼字,特地从英文搬出一套中文名字,蛋疼死了

个人觉得清除浮动不就是闭合浮动吗。叫法不一样而已。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏