🌶️第3期第7题：float:left对比inline-block

[LinDaiDai]

float:left对比inline-block

• 文档流：浮动会脱离文档流，且使得被覆盖的元素的文字内容会环绕在周围；而inline-block不会脱离文档流也就不会覆盖其它元素。浮动也会引发父级高度塌陷问题。
• 水平位置：不能给有浮动元素的父级设置text-align:center使得子集浮动元素居中，而inline-block却可以。
• 垂直对齐：inline-block元素沿着默认的基线对齐(baseline)，若是两个元素的font-size不同则可能会看到一高一低，你可以通过设置vertical-align: top或者bottom;来使得它们基于顶线或者底线对齐(注意这个是设置到元素本身而不是设置到它们的父级)。而浮动元素紧贴顶部，不会有这个问题。
• 空白：inline-block包含html空白节点。如果你的html中一系列元素每个元素之间都换行了，当你对这些元素设置inline-block时，这些元素之间就会出现空白。而浮动元素会忽略空白节点，互相紧贴。

针对第三点，垂直对齐可以看下面👇这个案例：

默认情况下：

css代码为：

.sub {
  background: hotpink;
  display: inline-block;
}

设置了vertial-align: top;后：

css代码为：

.sub {
  background: hotpink;
  display: inline-block;
  vertical-align: top;
}