Safari flex 不适用于 clearfix hack

Question

我在包含浮动弹性项目的弹性容器中添加了 clearfix hack。它适用于 Chrome（版本 51.0.2704.84）和 Firefox（版本 47.0），但不适用于 Safari（版本 9.1.1 (11601.6.17)）。第三个项目将进入第二排并且有足够的空间。我想知道这是否是一个错误以及如何解决它。

* {
  box-sizing: border-box;
}
#container {
  display: flex;
  flex-wrap: wrap;
  width: 800px;
  border: 1px solid #dcdcdc;
}
/* its me who make this magic */
#container:before {
  content: " ";
  display: table;
}
#container:after {
  clear: both;
}
#container > div {
  float: left;
  width: 33.3333333%;
  height: 100px;
  padding: 0 15px;
  background-color: #dcdcdc;
  display: flex;
  position: relative;
}

<div id="container">
  <div>xxx</div>
  <div>ooooo</div>
  <div>nmn</div>
  <div>sdfsdf</div>
</div>

https://jsfiddle.net/3ghwm4ua/8/

Answer 1

我遇到了同样的问题，这篇博文有一个对我有用的解决方案： https://danisadesigner.com/blog/flexbox-clear-fix-pseudo-elements/

帖子中提到的技巧是给 :before 元素的宽度为 0，因此它不包含在列计算中（如果没有，它似乎得到 1px 的值）。像这样：

.clear-fix:before,
.clear-fix:after {
  flex-basis: 0;
  order: 1;
}

Answer 2

您的 clearfix 代码不应在 Safari（或 Chrome 或 Firefox，就此而言）中运行。

float 和 clear 属性在弹性容器中没有影响。它们被忽略了。

来自规范：

3. Flex Containers: the flex and inline-flex display values

flex 容器为其创建一个新的 flex 格式化上下文 内容。这与建立块格式化上下文相同， 除了使用 flex 布局而不是块布局。

例如，float 不会侵入 flex 容器，而 flex 容器的边距不会与其内容的边距一起折叠。

Flex 容器不是块容器，因此某些属性 设计时假设块布局不适用于 flex布局的上下文。特别是：

• float 和 clear 不会创建弹性项目的浮动或清除，也不要使其脱离流动。