清除浮动

由于块级元素具有换行特性，因此可以结合 clear 属性来清除浮动。

    .clear:after { 
        content: ''; 
        display: table; // 也可以是 block，最好不要是 list-item 
        clear: both; 
    }
1
2
3
4
5

为什么最好不要是 list-item ？

因为display: list-item; 主要是因为它兼容性不好 IE 浏览器不支持,

并且额外会出现的项目符号，还得再加一行 list-style: none;

内联元素

内联元素（inline-level elements）‘用于负责内容’，它并排显示，宽度自动收缩，不能设置宽高。常见内联元素有a、span、b、u、label 、em等。

这里也需要特别说明一下：

内联元素也一样，display 为 inline 的元素是内联元素，但不代表块级元素就是display: inline;

display 为inline-block 和 inline-table 都是内联元素。

例如：按钮，其 display 默认值是 inline-block；是内联元素。

结语

本文到此结束

如果大家还有什么其他想法，欢迎在评论区交流！