关于块级元素

块级元素对应的英文是 block-level element，常见的块级元素有<div>、<li>和<table> 等。需要注意，块级元素和display为 block的元素”不是一个概念。例如，<li>元 素默认的 display值是list-item，<table>元素默认的display 值是table，但是它们 均是块级元素，因为它们都符合块级元素的基本特征，也就是一个水平流上只能单独显示一 个元素，多个块级元素则换行显示。

• 块级元素可以配合 clear 属性来清除浮动带来的影响。

在非IE浏览器（如Firefox）下，当容器的高度为auto，且容器的内容中有浮动（float为left或right）的元素，在这种情况下，容器的高度不能自动伸长以适应内容的高度，使得内容溢出到容器外面而影响（甚至破坏）布局的现象。这个现象叫浮动溢出，为了防止这个现象的出现而进行的CSS处理，就叫CSS清除浮动。

下面是一个示例

HTML 代码

<div class="box clear">
    <img src="/images/1.jpg">
</div>

CSS 代码

.box {
    padding: 10px;
    background-color: #cd0000;
}
.box > img {
    float: left;
}

.clear:after {
    content: "";
    display: block;
    clear: both;
}

图 1-1 不清除浮动 图 1-2 使用 block 或者 tabel 清除浮动 图 1-3 使用 list-item 清除浮动

开发时，我们使用 block 或 table，并不会使用 list-item，主要有 3 个原因。

1. 1 个字符的比较多，其他都是 5 个字符。
2. 会出现不需要的项目符号，如图 1-3 所示。加上 list-style: none 就可以去除了。
3. IE 浏览器不支持伪元素的 display值为list- item。这是不使用 display:list-item 清除浮动的 主因，兼容性不好。对于 IE浏览器(包括 IE11)，普通元 素设置 display:list-item 有效，但是:before /:after伪元素就不行。之所以 list-item 元素会出现项目符号是因为生成 了一个附加的盒子，学名“标记盒子”(marker box)，专门用来放圆点、数字这些项目符号。IE 浏览器下伪元素不支持 list-item 或许就是无法创建这个“标记盒子”导致的。