🌶️第3期第7题:float:left对比inline-block
Opened this issue · 0 comments
LinDaiDai commented
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;
}