CSS：清除内联元素

Posted 2023-03-04

【中文标题】CSS：清除内联元素

【英文标题】：CSS: clear on inline elements

【发布时间】：2020-10-30 22:22:16

【问题描述】：

查看JSFiddle：

<IMG src="https://www.google.com.hk/images/srpr/logo11w.png" >
<span>The contents of floats are </span>

图像是浮动的，span 有clear:both。但是，如果span 具有显示值inline 或inline-block，则不会创建间隙。只有block，才会创建间隙。

我查看了Spec，上面写着：

both：要求框的上边框低于下边框 产生的任何右浮动和左浮动框的外边缘 来自源文档中较早的元素。

它没有提到display 如何影响许可的创建。有人可以帮忙解释一下吗？

【参考方案1】：

很简单：clear 只适用于块级元素。

'清除'

适用于：块级元素

Block-level elements 定义为

块级元素是源文档的那些元素 在视觉上被格式化为块（例如，段落）。下列 display 属性的值使元素块级：block， list-item 和 table。