摘要:之前一直都知道中的部分元素具有包裹性,今天写博客的时候正好也遇到了一个,所以想总结一下,有错误的地方欢迎指出来。浮动经过测试,浮动元素会自动包裹内部元素。代码浮动元素具有包裹性为或除了之外的其他定位也都具有包裹性,可以看做特殊的。
之前一直都知道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/50495.html
摘要:之前一直都知道中的部分元素具有包裹性,今天写博客的时候正好也遇到了一个,所以想总结一下,有错误的地方欢迎指出来。浮动经过测试,浮动元素会自动包裹内部元素。代码浮动元素具有包裹性为或除了之外的其他定位也都具有包裹性,可以看做特殊的。 之前一直都知道css中的部分元素具有包裹性,今天写博客的时候正好也遇到了一个,所以想总结一下,有错误的地方欢迎指出来。 什么是包裹性? 包裹性就是父元素的宽...
摘要:在正常情况下,页面总是从左到右,从上到下布局,这种被称为正常的流。破坏文档流这是最本质的特性,因此设计的初衷就是破坏文档流。但是也有一种情况是,浮动元素前后并没有内联元素,因此也就不存在行框盒子,这时候就是浮动锚点在起作用。 前几天有小伙伴说对float的学习云里雾里的,下面我就给大家说一下关于float的一些问题。 在css中,是存在流的概念的。在正常情况下,页面总是从左到右,从上到...
摘要:破坏文档流这是最本质的特性,因此设计的初衷就是破坏文档流。但是也有一种情况是,浮动元素前后并没有内联元素,因此也就不存在行框盒子,这时候就是浮动锚点在起作用。 前言 在css中,是存在流的概念的。在正常情况下,页面总是从左到右,从上到下布局,这种被称为正常的流。但是有很多情况,正常流是没办法实现的,因此我们需要一些手段来破坏流,从而实现一些特殊的布局,而本节的主角float就具备破坏流...
摘要:导致这一现象的最根本原因在于被设置了的元素会脱离文档流。脱离文档流可以理解为子元素与父元素间的结构被破坏,父子关系解除。 1.引言 对于我们所有的web前端开发人员,float是或者曾经一度是你最熟悉的陌生人——你离不开它,却整天承受着它所带给你的各种痛苦,你以为它很简单就那么一点知识,但却驾驭不了它各种奇怪的现象。这就是我们又爱又恨的——float。所以,系统的学一学float是非常...
阅读 1987·2023-04-25 15:24
阅读 1555·2019-08-30 12:55
阅读 1596·2019-08-29 15:27
阅读 449·2019-08-26 17:04
阅读 2388·2019-08-26 10:59
阅读 1774·2019-08-26 10:44
阅读 2173·2019-08-22 16:15
阅读 2568·2019-08-22 15:36