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 条评论
登录 后参与评论

相关文章

来自专栏行者常至

回调函数(CallBack)

4172
来自专栏肖蕾的博客

第十四章:TouchPadTouchPadStyleTouchPad控件

API定义:TouchPad的样式 用法:public TouchpadStyle(Drawable background, Drawable knob) ...

702
来自专栏个人随笔

初识jQuery 基础篇

首先提供一个知识点外资源: 在线编程:无需编程环境:   https://codepen.io/pen   添加jQuery库:     Settings-->...

3726
来自专栏JackieZheng

初探JavaScript(二)——JS如何动态操控HTML

  除去五一三天,我已经和《JavaScript Dom编程艺术》磨合了六天,第一印象很好。慢慢的,我发现这是一块排骨,除了肉还有骨头。遇到不解的地方就会多看几...

2875
来自专栏Coco的专栏

由position属性引申的关于css的进阶讨论(包含块、BFC、margin collapse)

2095
来自专栏前端新视界

CSS 特殊属性介绍之 pointer-events

首先看一下 MDN 上关于 pointer-events 的介绍: CSS属性 pointer-events 允许作者控制特定的图形元素在何时成为鼠标事件的 t...

20410
来自专栏Android-薛之涛

Android-Animation 总结(三(ObjectAnimator))

上一篇我们讲了ValueAnimator,今天我们讲一下ObjectAnimator,首先我在之前讲过,它继承自ValueAnimator,ValueAnima...

2102
来自专栏前端小作坊

CSS3着重符及其fallback

在中文里面,我们一般会在文字下方加上圆形符号。在日语中会在文字上方加上小顿号。在CSS3中如下属性可以控制着重符号:

1092
来自专栏小狼的世界

YUI3 CSS框架学习

改变最大的我觉得是Grids部分,YUI2中以模版的方式提供给我们调用,功能中多选项也很多,而且配合Grid Build Tool,可以快速的生成复杂的页面结构...

1143
来自专栏lonelydawn的前端猿区

一款不可多得的火柴时钟

? 火柴时钟 一款有意思的时钟玩具,原生代码编写,使用 CSS 渲染过渡动效,引入 base64 格式 data url 图片。 引用 <link rel=...

3077

扫码关注云+社区

领取腾讯云代金券