資訊專欄INFORMATION COLUMN
摘要：之前一直都知道中的部分元素具有包裹性，今天寫博客的時候正好也遇到了一個，所以想總結一下，有錯誤的地方歡迎指出來。浮動經過測試，浮動元素會自動包裹內部元素。代碼浮動元素具有包裹性為或除了之外的其他定位也都具有包裹性，可以看做特殊的。
之前一直都知道css中的部分元素具有包裹性，今天寫博客的時候正好也遇到了一個，所以想總結一下，有錯誤的地方歡迎指出來。
什么是包裹性？包裹性就是父元素的寬度會收縮到和內部元素寬度一樣。
哪些元素具有包裹性？就我已知的有：absolute，fixed，float，inline-box等等。
仔細看看這些元素，他們都有一個共同特點，那就是都會產生BFC，所以我大膽的猜想了一下，所有能產生BFC的元素都具有包裹性，下面就一個個驗證。
浮動經過測試，浮動元素會自動包裹內部元素。
代碼：浮動元素具有包裹性
position為absolute或fixed除了relative之外的其他定位也都具有包裹性，fixed可以看做特殊的absolute。
代碼：定位元素具有包裹性
overflow不為visible和zoomoverflow和zoom無法自適應寬度，但是可以用來清除浮動，它們都可以包裹元素高度。
代碼：overflow和zoom元素不具有包裹性
display為inline-block, table-cell, table-caption, flex, inline-flex經過測試，只有flex無法包裹，其他的都很好的包裹了。
代碼：只有flex不具有包裹性
所以，經過測試，并不是所有可以產生BFC的元素都具有包裹性。
應用場景：個人認為，當遇到內部寬度不確定的時候，父元素又需要設置一個寬度，這時候包裹性就很有用處了，比如導航條里面，li寬度沒有固定的時候，又希望ul的寬度和總寬度相同，這時候可以給ul設置inline-block等元素來解決。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/50495.html
摘要：之前一直都知道中的部分元素具有包裹性，今天寫博客的時候正好也遇到了一個，所以想總結一下，有錯誤的地方歡迎指出來。浮動經過測試，浮動元素會自動包裹內部元素。代碼浮動元素具有包裹性為或除了之外的其他定位也都具有包裹性，可以看做特殊的。 之前一直都知道css中的部分元素具有包裹性，今天寫博客的時候正好也遇到了一個，所以想總結一下，有錯誤的地方歡迎指出來。 什么是包裹性？ 包裹性就是父元素的寬...
摘要：在正常情況下，頁面總是從左到右，從上到下布局，這種被稱為正常的流。破壞文檔流這是最本質的特性，因此設計的初衷就是破壞文檔流。但是也有一種情況是，浮動元素前后并沒有內聯元素，因此也就不存在行框盒子，這時候就是浮動錨點在起作用。 前幾天有小伙伴說對float的學習云里霧里的，下面我就給大家說一下關于float的一些問題。 在css中，是存在流的概念的。在正常情況下，頁面總是從左到右，從上到...
摘要：破壞文檔流這是最本質的特性，因此設計的初衷就是破壞文檔流。但是也有一種情況是，浮動元素前后并沒有內聯元素，因此也就不存在行框盒子，這時候就是浮動錨點在起作用。 前言 在css中，是存在流的概念的。在正常情況下，頁面總是從左到右，從上到下布局，這種被稱為正常的流。但是有很多情況，正常流是沒辦法實現的，因此我們需要一些手段來破壞流，從而實現一些特殊的布局，而本節的主角float就具備破壞流...
摘要：導致這一現象的最根本原因在于被設置了的元素會脫離文檔流。脫離文檔流可以理解為子元素與父元素間的結構被破壞，父子關系解除。 1.引言 對于我們所有的web前端開發人員，float是或者曾經一度是你最熟悉的陌生人——你離不開它，卻整天承受著它所帶給你的各種痛苦，你以為它很簡單就那么一點知識，但卻駕馭不了它各種奇怪的現象。這就是我們又愛又恨的——float。所以，系統的學一學float是非常...
閱讀 2031·2023-04-25 15:24
閱讀 1575·2019-08-30 12:55
閱讀 1615·2019-08-29 15:27
閱讀 470·2019-08-26 17:04
閱讀 2406·2019-08-26 10:59
閱讀 1797·2019-08-26 10:44
閱讀 2193·2019-08-22 16:15
閱讀 2587·2019-08-22 15:36
