Safari flex 不适用于 clearfix hack

Posted 2023-03-05

【中文标题】Safari flex 不适用于 clearfix hack

【英文标题】：safari flex does not work with clearfix hack

【发布时间】：2016-10-15 23:28:16

【问题描述】：

我在包含浮动弹性项目的弹性容器中添加了 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/

【参考方案1】：

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

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

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

【参考方案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 不会创建弹性项目的浮动或清除，也不要使其脱离流动。

【讨论】：

感谢您的回答。我知道浮动不会影响弹性。我认为使用float的目的只是在浏览器不支持flex的情况下（我不确定我是否正确）......当div宽度设置为33.3333％时。它应该每行有3个div。但在 Safari 中，每行有 2 个 div。似乎在 pesudo 元素对 flex 容器产生影响之前......

我观察到一些与 pseudo 类似的问题：after，当为 clearfix hack 禁用 content 属性时 - 溢出问题消失了，将其引入，问题又回来了。