CSS问题：H1设margin为0仍占满父div宽度，右浮动元素无法同排

为什么H1会占满父div宽度？ #

H1是块级元素（默认display: block），这类元素的核心特性就是会自动填充父容器的可用宽度——不管你有没有显式设置width属性，哪怕把margin设为0，它依然会占满父div的100px宽度，这是块级元素的默认布局行为。

为什么浮动元素无法和H1处于同一div行内？ #

因为块级元素会独占一行，哪怕父容器有剩余空间，它也会占据整行的布局空间。右浮动的元素虽然脱离了普通文档流，但块级的H1已经占满了父div的整行宽度，浮动元素自然只能被挤到H1的下方，无法和它处于同一行。

解决方法 #

你可以通过修改H1的显示属性，打破它的块级特性，让它和浮动元素能共存于同一行：

方案1：将H1改为行内块元素

把H1的display设置为inline-block，这样它的宽度会由内容决定，而不是填充父容器，浮动元素就能和它在同一行排列了：

<div style="width: 100px; border: 1px solid #ccc;">
  <h1 style="margin: 0; display: inline-block;">我的标题</h1>
  <div style="float: right;">浮动内容</div>
</div>

方案2：给H1设置固定宽度（或auto）

如果你希望H1保持块级特性但不占满父容器，可以显式设置它的width为auto（由内容宽度决定）或者具体数值：

<div style="width: 100px; border: 1px solid #ccc;">
  <h1 style="margin: 0; width: auto;">我的标题</h1>
  <div style="float: right;">浮动内容</div>
</div>

额外注意点

• 如果父容器的宽度不足以同时容纳H1和浮动元素，两者还是会自动换行，你需要确保父容器宽度足够，或者调整元素的尺寸。
• 使用inline-block时，元素之间可能会出现空白间隙，这是HTML标签换行导致的，可以通过给父容器设置font-size: 0，再给子元素恢复字体大小来解决。

内容的提问来源于stack exchange，提问作者Vickar