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屬性在柔性容器中沒有影響。他們被忽略。

從規範：

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

Flex容器確立了其 內容的新柔性格式上下文。這與建立塊格式上下文 相同，除了使用彈性佈局而不是塊佈局。

例如，浮動不會進入柔性容器，和柔性 容器的利潤率不符合其內容的利潤率崩潰。

柔性容器不是塊容器，因此假定塊佈局設計的某些屬性不適用於柔性佈局的 上下文中。特別是：

• float和clear不產生浮動或柔性物品的通關，不要把它亂流。