首先，明確一點：
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 。