野生动物园Flex不与clearfix破解工作

Question

我加入柔性容器，其容纳浮动弹性项clearfix破解。它正常工作与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

Flex容器确立了其内容的新的Flex格式化的内容。这是相同的建立块格式化内容，不同之处在于柔布局来代替块布局。

例如，浮动不会进入柔性容器，柔性容器的利润率不符合其内容的利润率崩溃。

Flex容器都不会阻止容器，所以在设计时块布局的假设，一些属性不挠布局的情况下适用。尤其是：

• float和clear不产生浮动或柔性物品的通关，不要把它乱流。

Answer 2

我有同样的问题，这个博客帖子有一个为我工作的解决方案：qazxsw POI

帖子中提到的诀窍是给https://danisadesigner.com/blog/flexbox-clear-fix-pseudo-elements/元素，所以它不包含在列计算的宽度为0（如果没有也似乎得到的1px的一个值）。像这样：

:before