CSS中的包裹性

zhangfaliang 發(fā)布于2019-08-30 15:53 / 1549人閱讀

摘要：之前一直都知道中的部分元素具有包裹性，今天寫博客的時(shí)候正好也遇到了一個(gè)，所以想總結(jié)一下，有錯(cuò)誤的地方歡迎指出來。浮動(dòng)經(jīng)過測試，浮動(dòng)元素會(huì)自動(dòng)包裹內(nèi)部元素。代碼浮動(dòng)元素具有包裹性為或除了之外的其他定位也都具有包裹性，可以看做特殊的。

之前一直都知道css中的部分元素具有包裹性，今天寫博客的時(shí)候正好也遇到了一個(gè)，所以想總結(jié)一下，有錯(cuò)誤的地方歡迎指出來。

什么是包裹性？

包裹性就是父元素的寬度會(huì)收縮到和內(nèi)部元素寬度一樣。

哪些元素具有包裹性？

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

仔細(xì)看看這些元素，他們都有一個(gè)共同特點(diǎn)，那就是都會(huì)產(chǎn)生BFC，所以我大膽的猜想了一下，所有能產(chǎn)生BFC的元素都具有包裹性，下面就一個(gè)個(gè)驗(yàn)證。

浮動(dòng)

經(jīng)過測試，浮動(dòng)元素會(huì)自動(dòng)包裹內(nèi)部元素。

代碼：浮動(dòng)元素具有包裹性

position為absolute或fixed

除了relative之外的其他定位也都具有包裹性，fixed可以看做特殊的absolute。

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

overflow不為visible和zoom

overflow和zoom無法自適應(yīng)寬度，但是可以用來清除浮動(dòng)，它們都可以包裹元素高度。

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

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

經(jīng)過測試，只有flex無法包裹，其他的都很好的包裹了。

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

所以，經(jīng)過測試，并不是所有可以產(chǎn)生BFC的元素都具有包裹性。

應(yīng)用場景：

個(gè)人認(rèn)為，當(dāng)遇到內(nèi)部寬度不確定的時(shí)候，父元素又需要設(shè)置一個(gè)寬度，這時(shí)候包裹性就很有用處了，比如導(dǎo)航條里面，li寬度沒有固定的時(shí)候，又希望ul的寬度和總寬度相同，這時(shí)候可以給ul設(shè)置inline-block等元素來解決。