CSS 小问题请教

[Counter]

源代码链接：www.runoob.com/try/try.php?filename=trycss_ex_pagination

修改 ul.pagination

ul.pagination {
    display: inline-block;
    padding: 0;
    margin: 0;
}

改成这样

ul.pagination {
    display: block;
    border:1px solid red;
    padding: 0;
    margin: 0;
}

ul 从 inline-block 改成 block 显示，其它 style 保持不变，为啥上下边框重合了？（高度丢失？）

[ashong]

li a 是 float， 高度不计入

[sanmaozhao]

display block 的时候，比较好理解，因为子元素浮动了，所以脱离了常规文档流，导致容器高度为 0，上下边框自然就重合了。

display inline-block 的时候，行为有点怪异，看上去有了清除浮动的效果。
和块格式化上下文（ BFC ）有关，以下文章有说明：
https://juejin.im/post/59e7190bf265da4307025d91#heading-5

[sugars]

你也可以不改成 block，加个 overflow:hidden;试试

[lathlaeril]

li 是浮动的，所以其父元素需要 clearfix，不然会失去高度。

···
ul.pagination {
display: block;
padding: 0;
margin: 0;
border: 1px solid red;
overflow: auto; // clearfix
}
···

或者

···

ul.pagination {
display: block;
padding: 0;
margin: 0;
border: 1px solid red;
}

// clearfix
ul.pagination::after {
content: "";
clear: both;
display: table;
}
···

看你喜欢哪一种 clearfix 的方法了。

但是还是推荐用 flexbox 来解决，float+clearfix 有点旧了。

[chuzhuangtai]

li 标签是浮动的，没有高度，给父元素清除浮动，或者给 li 标签 display:inline-block ；即可

[Zink99]

a 标签脱离文档流，父元素计算高度时不计算 a 标签高度。
解决方案：清除浮动（楼上已给出

[Counter]

@sanmaozhao
@lathlaeril

理解了，谢谢，解决方式很有意思