Question

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

＆＃13;

* {
  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;
}

＆＃13;

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

＆＃13;

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布局而不是块布局。

例如，浮动不会侵入弹性容器 和弹性   容器的边距不会随其内容的边缘而崩溃。

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


float和clear不会创建弹性项目的浮动或间隙，也不会使其脱离流动。

Answer 2

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

文章中提到的技巧是将:before元素的宽度设置为0，这样它就不会包含在列计算中（如果不是，则看起来值是1px）。像这样：

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

safari flex不适用于clearfix hack

2 个答案: