使用CSS float属性时元素内文本无法与其他元素文本垂直对齐的原因咨询

这个问题我之前也碰到过，其实根源是浏览器给标题元素（比如<h1>）加的默认外边距搞的鬼！

问题原因拆解 #

你代码里的两个<h1>都带有浏览器默认的margin-top样式：

• 对于浮动的#floatElement来说，它是脱离文档流的块级元素，如果没有设置padding、border或者触发BFC（块级格式化上下文），子元素<h1>的margin-top会直接溢出到父元素外部，相当于把整个浮动元素往下“顶”了一段距离。
• 而#container是普通的块级元素，它内部的<h1>的margin-top只会在容器内部生效，不会影响容器本身的位置。

一进一出，两个<h1>的垂直位置自然就错开了——你看到的MDN示意图之所以显示对齐，是因为示例里没有带默认外边距的元素~

几种快速解决方法 #

方法1：给浮动元素加边框/内边距，挡住子元素的margin

给#floatElement加一个透明边框或者极小的内边距，就能阻止子元素的margin溢出：

#floatElement { 
  top:0px; 
  height: 60%; 
  width: 50%; 
  background-color:red; 
  float:right; 
  border-top: 1px solid transparent; /* 或者用 padding-top: 1px; */
}

方法2：给浮动元素触发BFC

通过设置overflow: hidden（或auto）让浮动元素形成独立的BFC，内部的margin就不会溢出了：

#floatElement { 
  top:0px; 
  height: 60%; 
  width: 50%; 
  background-color:red; 
  float:right; 
  overflow: hidden;
}

方法3：直接清除标题的默认margin

全局或者针对性地去掉<h1>的默认外边距，从根源解决问题：

h1 {
  margin-top: 0;
}

试一下上面任意一种方法，两个文本就能完美对齐啦！

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