CSS:清除内联元素 [英] CSS: clear on inline elements

问题描述

检查此 JSFiddle :

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

图像浮动，并且span具有clear:both.但是，如果span具有显示值inline或inline-block，则不会创建间隙.仅当它是block时，才会创建间隙.

The image is floated, and the span has clear:both. However, if the span has display value inline or inline-block, the clearance is not created. Only if it is block, the clearance is created.

我检查了规范 ，它说:

两者:均要求框的顶部边框边缘在底部下方 任何导致右上浮和左上浮的盒子的外边缘 来自源文档前面的元素.

both: Requires that the top border edge of the box be below the bottom outer edge of any right-floating and left-floating boxes that resulted from elements earlier in the source document.

它没有提到display如何影响间隙的创建.有人可以帮忙解释一下吗?

It doesn't mention how the display affects the creation of the clearance. Could anybody help to explain?

推荐答案

很简单:

It's simple: clear only applies to block-level elements.

清除"

适用于:块级元素

块级元素定义为

块级元素是源文档中那些 在视觉上被格式化为块(例如，段落).以下 display 属性的值构成元素块级:block， list-item和table.

Block-level elements are those elements of the source document that are formatted visually as blocks (e.g., paragraphs). The following values of the display property make an element block-level: block, list-item, and table.

这篇关于CSS:清除内联元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！