父元素高度为何会因子元素display属性而改变？

父元素的高度会因子元素的 display 属性而改变，主要是因为 display 属性决定了子元素在文档流中的布局方式，从而影响了父元素的高度计算。以下是几种常见的情况：

1. 子元素为 block 或 inline-block

• display: block;：块级元素会占据父元素的整个宽度，并且会在垂直方向上堆叠。父元素的高度会根据这些块级子元素的高度总和来计算。
• display: inline-block;：内联块级元素会在同一行内排列，但它们仍然会占据高度。父元素的高度会根据这些内联块级子元素的高度来计算。

2. 子元素为 inline

• display: inline;：内联元素不会占据整个宽度，它们会在同一行内排列。父元素的高度会根据这些内联元素的 line-height 和 font-size 来计算。如果内联元素的内容换行，父元素的高度会增加。

3. 子元素为 none

• display: none;：如果子元素的 display 属性设置为 none，则该子元素不会在页面上显示，也不会占据任何空间。因此，父元素的高度不会包含这个子元素的高度。

4. 子元素为 flex 或 grid

• display: flex; 或 display: grid;：当子元素使用 Flexbox 或 Grid 布局时，父元素的高度会根据子元素的排列方式和内容来决定。Flexbox 和 Grid 布局可以改变子元素的尺寸和排列方式，从而影响父元素的高度。

5. 子元素为 float

• float: left; 或 float: right;：浮动元素会脱离正常的文档流，但仍然会影响父元素的高度。如果父元素没有清除浮动（例如使用 clearfix 技巧），父元素的高度可能会塌陷，导致高度计算不准确。

6. 子元素为 position: absolute; 或 position: fixed;

• position: absolute; 或 position: fixed;：绝对定位或固定定位的元素会脱离正常的文档流，因此它们不会影响父元素的高度计算。父元素的高度不会包含这些定位元素的高度。

总结

父元素的高度会因子元素的 display 属性而改变，主要是因为 display 属性决定了子元素在文档流中的布局方式。不同的 display 值会导致子元素以不同的方式占据空间，从而影响父元素的高度计算。理解这些行为有助于更好地控制页面布局和元素尺寸。