[[430195]]

本文轉(zhuǎn)載自微信公眾號(hào)「志語(yǔ)自樂(lè)」，作者linxz。轉(zhuǎn)載本文請(qǐng)聯(lián)系志語(yǔ)自樂(lè)公眾號(hào)。

問(wèn)題來(lái)源背景

這個(gè)是當(dāng)時(shí)在『iCSS前端CSS交流討論』群中看到的，當(dāng)時(shí)轉(zhuǎn)為朋友的提問(wèn)是這樣的：

看這個(gè)圖，主要是有兩點(diǎn)：多行截?cái)嗪?tag 環(huán)繞。多行截?cái)嗄蔷褪怯?-webkit-box 那種方式，tag 環(huán)繞呢那就是早期圖文環(huán)繞的方式，用 float 就好了。

理想是豐滿(mǎn)的，現(xiàn)實(shí)是骨感的。未經(jīng)他人之苦，一切都是那么輕松。當(dāng)我提到說(shuō)使用 float 就可以實(shí)現(xiàn)后，群里有朋友反饋說(shuō)在 Safari 和移動(dòng)端會(huì)有問(wèn)題。

事實(shí)上我的確也沒(méi)在意過(guò)，于是事后嘗試了一下，的確如此。

摸索前進(jìn)

這是一個(gè)比較奇怪的現(xiàn)象，首先就我個(gè)人而言的確是沒(méi)有見(jiàn)到過(guò)這樣的情況，之前都沒(méi)有這樣類(lèi)似的需求。

初次嘗試

在沒(méi)有查閱任何資料之前，直接做了一個(gè)最簡(jiǎn)單的 demo 看效果。

<div class="text-overflow"> 
  <span class="tag">new</span> 
  很多文本內(nèi)容很多文本內(nèi)容很多文本內(nèi)容很多文本內(nèi)容很多文本內(nèi)容很多文本內(nèi)容很多文本內(nèi)容很多文本內(nèi)容很多文本內(nèi)容很多文本內(nèi)容很多文本內(nèi)容很多文本內(nèi)容很多文本內(nèi)容很多文本內(nèi)容很多文本內(nèi)容很多文本內(nèi)容很多文本內(nèi)容很多文本內(nèi)容很多文本內(nèi)容很多文本內(nèi)容很多文本內(nèi)容很多文本內(nèi)容很多文本內(nèi)容很多文本內(nèi)容 
</div> 

一個(gè)很簡(jiǎn)單的 HTML 結(jié)構(gòu)和一份很簡(jiǎn)單的 CSS 樣式。

.text-overflow { 
  width: 200px; 
  overflow: hidden; 
  display: -webkit-box; 
  -webkit-line-clamp: 2; 
  -webkit-box-orient: vertical; 
  font-size: 13px; 
  line-height: 1.425; 
  background-color: pink; 
} 
.tag { 
  float: right; 
  padding: 0 2px; 
  color: #fff; 
  background-color: #f32600; 
  border-radius: 2px; 
} 

最終的效果就是前面所看到的，在 Chrome 中很完美地得到期望結(jié)果，但是 Safari 中發(fā)現(xiàn) tag 不見(jiàn)了，并且有一條空白存在。

按照常規(guī)想法，一般這種內(nèi)容突然不見(jiàn)的，如果不是被截?cái)嗔司褪潜桓采w了，或者渲染有問(wèn)題。嘗試性在 .tag 中增加了 position: relative; 看看效果，發(fā)現(xiàn) tag 出現(xiàn)了，并且是獨(dú)占一行。

設(shè)想

tag 獨(dú)占一行，說(shuō)明至少有類(lèi)似 block 塊級(jí)元素的特性存在，而 float 之后本身就是會(huì)將元素轉(zhuǎn)為塊級(jí)。想到這里，突然想到，-webkit-box 這個(gè)是早期版本的 flex 布局，那會(huì)不會(huì)就跟 display: flex; 這個(gè)一樣，當(dāng)有了 flex 容器之后，flex 元素就不再是 BFC、IFC 之類(lèi)的，而是 FFC 呢?

如果真是這樣的話(huà)，那么是不是就可以多嵌套一層，由最外層控制文本多行截?cái)?，最里層控?tag 的浮動(dòng)效果呢?于是改變一下 HTML 結(jié)構(gòu)。

<div class="box"> 
  <div class="text-overflow"> 
    <span class="tag">new</span> 
    很多文本內(nèi)容很多文本內(nèi)容很多文本內(nèi)容很多文本內(nèi)容很多文本內(nèi)容很多文本內(nèi)容很多文本內(nèi)容很多文本內(nèi)容很多文本內(nèi)容很多文本內(nèi)容很多文本內(nèi)容很多文本內(nèi)容很多文本內(nèi)容很多文本內(nèi)容很多文本內(nèi)容很多文本內(nèi)容很多文本內(nèi)容很多文本內(nèi)容很多文本內(nèi)容很多文本內(nèi)容很多文本內(nèi)容很多文本內(nèi)容很多文本內(nèi)容很多文本內(nèi)容 
  </div> 
</div> 

在原有的基礎(chǔ)上，增加一層，CSS 部分也改變一下，其實(shí)只要把選擇符 .text-overflow 換成 .box 就可以了。

.box { 
  width: 200px; 
  overflow: hidden; 
  display: -webkit-box; 
  -webkit-line-clamp: 3; 
  -webkit-box-orient: vertical; 
} 
.tag { 
  float: right; 
  padding: 0 2px; 
  color: #fff; 
  background-color: #f32600; 
  border-radius: 2px; 
} 

那么最終的結(jié)果就是這樣。也就是說(shuō)的確是 -webkit-box 的影響，而且應(yīng)該就是 FFC 的關(guān)系。至于瀏覽器中差異可能就是兼容性問(wèn)題了。

查資料

既然 -webkit-box 是早期 flex 布局的一個(gè)版本，那么必定還有其他一些屬性，比如以下幾個(gè)：

• box-pack;
• box-align;
• box-orient;

那么就按照這個(gè)思路，我們可以看看 flex 相關(guān)的資料文檔。

在之前的 flex 教程文檔(https://www.yuque.com/linxz/flex)有關(guān) display: flex; 有過(guò)介紹，前面也提到了 FFC，那么具體的我們也可以從 w3c 文檔中看到：

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 form a containing block for their contents exactly like block containers do. [CSS21] The overflow property applies to flex containers.

以上內(nèi)容來(lái)自：https://www.w3.org/TR/css-flexbox-1/#flex-formatting-context

其中 A flex container establishes a new flex formatting context for its contents. 和 floats do not intrude into the flex container，至少說(shuō)明了在 flex 布局中，浮動(dòng)是有“可能”是無(wú)效的。

我的結(jié)論

針對(duì)這個(gè)問(wèn)題的處理方式，我的結(jié)論，是的，僅僅只是代表我個(gè)人的一個(gè)結(jié)論就是：多套一層，由外層控制元素多行截?cái)?，最里層去?shí)現(xiàn)浮動(dòng)環(huán)繞的效果，避開(kāi)因?yàn)?flex 容器而導(dǎo)致子元素浮動(dòng)失效的情況。