HTML元素分为两种：块级元素(block-level)和内联级元素(inline-level)。

块级元素与display:block

块级元素与display:block并不是对应的，凡是独占一行的元素都算是块级元素，所以display:list-item/table也是块级元素。

利用块级元素独占一行的特性，结合伪元素可以清浮动。

.clearfix::after {
  content: '';
  display: block; // 只要是块级元素就行，比如还可以是table
  clear: both;
}12345复制代码类型：[html]

块级元素与内联级元素的区别

1.块级元素独占一行；

2.块级元素可以设置width、height，内联级元素不行；

3.块级元素可以设置margin和padding，内联级元素只能设置水平方向的margin(margin-left、margin-right)和padding(padding-left、padding-right)。

「链接」