position，display，float叠加 && margin collapse问题

最新推荐文章于 2025-04-28 12:20:34 发布

肉卷

最新推荐文章于 2025-04-28 12:20:34 发布

阅读量218

点赞数

分类专栏：前端学习文章标签：属性叠加 margin折叠

前端学习专栏收录该内容

9 篇文章

订阅专栏

本文深入探讨CSS中position, display, float属性的交互作用，解析display为none时position与float失效的现象，以及绝对定位、float与display属性之间的关系。同时，详细分析margincollapse问题，包括如何触发BFC（Block Formatting Context）来避免margin折叠。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

position，display，float叠加

a. display为none时，position&&float失效;
b. 绝对定位，float失效，display: table/block;
c. float不为none，display: table/block;

margin collapse问题

a. float元素，绝对定位元素，inline-block元素的margin在垂直方向上不会与其他元素的margin折叠；
b. 创建了BFC(block formatting context）的元素，其子元素不会发生margin折叠；
c. 与其他元素按普通元素margin折叠计算（比较的元素margin符号相同，margin取绝对值大的；符号相反，取负值和正值绝对值最大的相加后的结果）。

触发BFC

1、浮动元素，float 除 none 以外的值；
2、绝对定位元素，position（absolute，fixed）；
3、display 为以下其中之一的值 inline-blocks，table-cells，table-captions；
4、overflow 除了 visible 以外的值（hidden，auto，scroll）