首先，明确一点：
HTML元素属性width的默认值是auto。
然而这个 auto 有四种表现，从而造成了不同的元素的默认宽度有不同的表现。
fill-available—— 意为 充分利用可用空间，比如块级元素div的宽度默认为父级元素的 100% ，这种表现也被称为块级元素的流动性。shrink-to-fit—— 意为 收缩至合适，比如inline-block元素min-content—— 意为 收缩至最小，在古老的表格布局中会出现（擎天柱的效果）。max-content—— 意为 超出容器限制。
fill-avaliable
它是 width:auto 的一种表现，主要体现在块级元素的流动性上，何谓流动性？可以这么理解：流动，就像水流一样，可以想象往一个容器中注入水的效果，水面一定是水平平铺在一个水平面上的，并且充满了这个水平面，这就是水的流动性。
块级元素的流动性，就是尽可能多的占有父级容器的空间，默认情况下，它会充满整个父级元素（100%），也就是为什么将块级元素的特征总结为：独占一行。
shrink-to-fit
shrink-to-fit 也是 width:auto 的一种表现，意为收缩到合适，典型的代表是浮动元素，绝对定位元素，弹性盒子，inline-block 元素。
一旦开启了浮动，绝对定位，弹性盒子（flex）之中的任意一项，元素的宽度就会表现为 shrink-to-fit ，从而，这也就解释了为什么开启浮动后块级元素不再独占一行，因为块级元素的流动性被破坏了，块级元素由原来的 fill-avaliable 变成了 shrink-to-fit 。绝对定位和弹性布局也是同样的道理。
此时的元素宽度由子元素撑开，父级元素会包裹着子元素，这种现象也被称为元素的包裹性。
min-content
可以理解为 “首选最小宽度”，意思是元素最适合的最小宽度。为了不让图文在 width:auto 时宽度变成0
max-content
超出容器限制，默认情况下，元素是不会主动超过父级容器的宽度的，但是也有特殊的情况，比如长文本，并且设置了文本不换行（white-space:nowrap），此时就能超出容器的限制。
比如，外层是一个块级元素，里面是一个 inline-block 元素，里面的元素是一个长文本，设置了不换行，那么此时子元素既保持了原有的 shrink-to-fit 特性，又让内容的宽度最大，直接无视父级容器的宽度，这种现象就被称为 max-content 。