探究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等元素来解决。