html - safari flex 不适用于 clearfix hack

Question

我在 flex 容器中添加了 clearfix hack，其中包含 float flex 元素。它适用于 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

您的 clearfix 代码不应在 Safari(或 Chrome 或 Firefox，就此而言)中工作。

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

来自规范:

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

A flex container establishes a new flex formatting context for its contents. This is the same as establishing a block formatting context, except that flex layout is used instead of block layout.

For example, floats do not intrude into the flex container, and the flex container’s margins do not collapse with the margins of its contents.

Flex containers are not block containers, and so some properties that were designed with the assumption of block layout don’t apply in the context of flex layout. In particular:

• float and clear do not create floating or clearance of flex item, and don't take it out-of-flow.