摘要：之前一直都知道中的部分元素具有包裹性，今天写博客的时候正好也遇到了一个，所以想总结一下，有错误的地方欢迎指出来。浮动经过测试，浮动元素会自动包裹内部元素。代码浮动元素具有包裹性为或除了之外的其他定位也都具有包裹性，可以看做特殊的。
之前一直都知道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等元素来解决。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/116542.html
摘要：在正常情况下，页面总是从左到右，从上到下布局，这种被称为正常的流。破坏文档流这是最本质的特性，因此设计的初衷就是破坏文档流。但是也有一种情况是，浮动元素前后并没有内联元素，因此也就不存在行框盒子，这时候就是浮动锚点在起作用。 前几天有小伙伴说对float的学习云里雾里的，下面我就给大家说一下关于float的一些问题。 在css中，是存在流的概念的。在正常情况下，页面总是从左到右，从上到...
摘要：在正常情况下，页面总是从左到右，从上到下布局，这种被称为正常的流。破坏文档流这是最本质的特性，因此设计的初衷就是破坏文档流。但是也有一种情况是，浮动元素前后并没有内联元素，因此也就不存在行框盒子，这时候就是浮动锚点在起作用。 前几天有小伙伴说对float的学习云里雾里的，下面我就给大家说一下关于float的一些问题。 在css中，是存在流的概念的。在正常情况下，页面总是从左到右，从上到...
摘要：破坏文档流这是最本质的特性，因此设计的初衷就是破坏文档流。但是也有一种情况是，浮动元素前后并没有内联元素，因此也就不存在行框盒子，这时候就是浮动锚点在起作用。 前言 在css中，是存在流的概念的。在正常情况下，页面总是从左到右，从上到下布局，这种被称为正常的流。但是有很多情况，正常流是没办法实现的，因此我们需要一些手段来破坏流，从而实现一些特殊的布局，而本节的主角float就具备破坏流...
摘要：导致这一现象的最根本原因在于被设置了的元素会脱离文档流。脱离文档流可以理解为子元素与父元素间的结构被破坏，父子关系解除。 1.引言 对于我们所有的web前端开发人员，float是或者曾经一度是你最熟悉的陌生人——你离不开它，却整天承受着它所带给你的各种痛苦，你以为它很简单就那么一点知识，但却驾驭不了它各种奇怪的现象。这就是我们又爱又恨的——float。所以，系统的学一学float是非常...
阅读 1235·2021-11-24 09:38
阅读 2509·2021-11-22 13:54
阅读 838·2021-10-14 09:48
阅读 2149·2021-09-08 09:35
阅读 1447·2019-08-30 15:53
阅读 1047·2019-08-30 13:14
阅读 478·2019-08-30 13:09
阅读 2421·2019-08-30 10:57
