之前一直都知道css中的部分元素具有包裹性，今天写博客的时候正好也遇到了一个，所以想总结一下，有错误的地方欢迎指出来。
什么是包裹性？
包裹性就是父元素的宽度会收缩到和内部元素宽度一样。
哪些元素具有包裹性？
就我已知的有：absolute，fixed，float，inline-box等等。
仔细看看这些元素，他们都有一个共同特点，那就是都会产生BFC，所以我大胆的猜想了一下，所有能产生BFC的元素都具有包裹性，下面就一个个验证。
浮动
经过测试，浮动元素会自动包裹内部元素。
代码：浮动元素具有包裹性
position为absolute或fixed
除了relative之外的其他定位也都具有包裹性，fixed可以看做特殊的absolute。
代码：定位元素具有包裹性
overflow不为visible和zoom
overflow和zoom无法自适应宽度，但是可以用来清除浮动，它们都可以包裹元素高度。
display为inline-block, table-cell, table-caption, flex, inline-flex
经过测试，只有flex无法包裹，其他的都很好的包裹了。
代码：只有flex不具有包裹性
应用场景：
个人认为，当遇到内部宽度不确定的时候，父元素又需要设置一个宽度，这时候包裹性就很有用处了，比如导航条里面，li宽度没有固定的时候，又希望ul的宽度和总宽度相同，这时候可以给ul设置inline-block等元素来解决。