探究CSS中的包裹性

以前一直都知道css中的部分元素具備包裹性，今天寫博客的時候正好也遇到了一個，因此想總結一下，有錯誤的地方歡迎指出來。

什麼是包裹性？

包裹性就是父元素的寬度會收縮到和內部元素寬度同樣。

哪些元素具備包裹性？

就我已知的有：absolute，fixed，float，inline-box等等。

仔細看看這些元素，他們都有一個共同特色，那就是都會產生BFC，因此我大膽的猜測了一下，全部能產生BFC的元素都具備包裹性，下面就一個個驗證。

浮動

通過測試，浮動元素會自動包裹內部元素。

代碼：浮動元素具備包裹性

position爲absolute或fixed

除了relative以外的其餘定位也都具備包裹性，fixed能夠看作特殊的absolute。

代碼：定位元素具備包裹性

overflow不爲visible和zoom

overflow和zoom沒法自適應寬度，可是能夠用來清除浮動，它們均可以包裹元素高度。

代碼：overflow和zoom元素不具備包裹性

display爲inline-block, table-cell, table-caption, flex, inline-flex

通過測試，只有flex沒法包裹，其餘的都很好的包裹了。

代碼：只有flex不具備包裹性

應用場景：

我的認爲，當遇到內部寬度不肯定的時候，父元素又須要設置一個寬度，這時候包裹性就頗有用處了，好比導航條裏面，li寬度沒有固定的時候，又但願ul的寬度和總寬度相同，這時候能夠給ul設置inline-block等元素來解決。