webkit中BFC元素临近浮动元素时的边距bug

一直以来我们都很熟悉IE的“浮动边距加倍”的bug,并且绝大多数重构人员都已经很擅长在需要浮动时就直接绕过他。其实以webkit为核心的浏览器,包括但不限于Safari和Chrome,也有一个关于浮动和边距的bug,同样会造成布局错误。我在最近三个月的前一个月连续遭遇了两次这个bug,后两个月虽然避免了再次出现,但是直到现在才把这个bug彻底弄清楚。

触发这个bug的条件是:

  • 在一个非浮动元素上应用overflow,且其值不为visible(这将形成一个Block Formatting Context元素)。
  • 这个BFC元素拥有一个浮动的兄弟元素。
  • 在这个BFC元素上应用与其兄弟元素浮动方向相同的margin。
  • 这个BFC元素没有指定宽度值(或者指定width:auto)

当满足触发条件时,该BFC元素的另一侧的边距将不再受css控制(在webkit核心浏览器下),而是由你所指定的与浮动元素相同的边距决定,即使你在css中明确指定另一侧的边距为0或任意值也没用。具体来说,可以分为两种情况:

  • 当BFC与浮动方向相同的边距小于或等于浮动元素占据的总宽度(width+margin+padding+border)时,BFC另一侧的边距等于所设定方向上的边距(下图前两种情况);
  • 当BFC与浮动方向相同的边距大于浮动元素占据的总宽度时,BFC另一侧的边距等于浮动元素占据的总宽度(下图第三种情况)。
  • 第一种情况:main的左边距为50px,小于sider的总宽度100px,于是它右侧自动出现了50px的边距(等于margin-left);
  • 第二种情况:main的左边距为100px,等于sider的总宽度100px,于是它右侧自动出现了100px的边距(等于margin-left);
  • 第三种情况:main的左边距为150px,大于sider的总宽度100px,于是它右侧自动出现了100px的边距(等于sider总宽度);

以上截图来自这个demo页面,你可以用Safari或者Chrome自己打开查看具体情况。

要解决这个bug,只要让前面所说的四个条件任意一个不满足即可。例如:去除BFC元素上的overflow(但是很多时候我们需要这个overflow);或者给BFC指定宽度(但是这样就失去了main自适应宽度的优势)。

最佳做法,当overflow和margin都必不可少的时候,把BFC的margin-left改成浮动元素的margin-right。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏菩提树下的杨过

Metaball(元球)效果学习

几年前就在网上曾看见过这种效果,但一直不知道叫什么名字 ? 前一阵无意在9ria(天地会)论坛上看到了一篇专门讲这个的文章:AS3 元球(Metaball),不...

18510
来自专栏PPV课数据科学社区

数据挖掘知识脉络与资源整理(七)–饼图

? ? 简介 饼图英文学名为Sector Graph, 有名Pie Graph。常用于统计学模块。2D饼图为圆形,手画时,常用圆规作图。 仅排列在工作表的一...

2657
来自专栏Modeng的专栏

如何更愉快地使用em

CSS提供了很多种方式去定义一个值。大家最熟悉的可能也是最容易使用的就是像素(pixel),这被称做“绝对单位”。也就是说,5px在不同的场景下是一样的值。而其...

703
来自专栏IMWeb前端团队

transform 的副作用

本文作者:IMWeb elvin 原文出处:IMWeb社区 未经同意,禁止转载 transform 想必大家都很熟悉,可以通过其转换(translat...

1809
来自专栏腾讯NEXT学位

浅析CSS里的 BFC 和 IFC

29111
来自专栏Coco的专栏

纯 CSS 实现波浪效果!

2024
来自专栏偏前端工程师的驿站

CSS魔法堂:重拾Border之——更广阔的遐想

前言  当CSS3推出border-radius属性时我们是那么欣喜若狂啊,一想到终于不用再添加额外元素来模拟圆角了,但发现border-radius还分水平半...

1715
来自专栏菩提树下的杨过

silverlight2中的定时器,以及如何动态改变控件的坐标

参考了园子里nasa写里的定时器的用法,以及旋转木马的部分代码,弄了一个小小的示例,贴在这里方便以后备查 目的:让某一个控件沿着圆形轨迹运动 xaml:采用Ca...

1607
来自专栏小红豆的数据分析

小蛇学python(9)matplotlib的基本使用

matplotlib作为python中可视化最经典的库,是个不得不学习的东西。尽管长江后浪推前浪,涌现出了很多更好的可视化库,比如Plotly。不过,它们几乎全...

1163
来自专栏知晓程序

小程序也能做这么精致的动效?看完我给大神献上了膝盖…… | 开发

1123

扫描关注云+社区