標籤:

display:inline 的元素不能用於清除浮動嗎?

按照 CSS 2.1 spec Visual formatting model 相關章節的說法,inline元素也可以用於清除相鄰元素的浮動:

但是在實際情況中 chrome和firefox都沒有遵循該例子的說法:

代碼參見:http://jsbin.com/iwuciw/3/edit

另外,在標準文檔中,clear屬性只能應用在塊級元素上:

文檔和瀏覽器的實現是一致的,但是標準裡面舉的例子卻背道而馳,何解?


受邀回答。

恭喜你,你發現了 spec 的一個 bug。歡迎提交到 W3C 中文興趣小組,cc@呂康豪

在 CSS 1 中,clear 屬性是可應用於所有元素的,這一點在 CSS 2.1 中有說明:

引用自 http://www.w3.org/TR/CSS2/visuren.html#propdef-clear

Note. This property applied to all elements in CSS1. Implementations may therefore have supported this property on all elements. In CSS2 and CSS 2.1 the "clear" property only applies to block-level elements. Therefore authors should only use this property on block-level elements. If an implementation does support clear on inline elements, rather than setting a clearance as explained above, the implementation should force a break and effectively insert one or more empty line boxes (or shifting the new line box downward as described in section 9.5) to move the top of the cleared inline"s line box to below the respective floating box(es).

而 CSS 2 的第一個草案中(http://www.w3.org/TR/WD-CSS2-971104/flowobj.html#propdef-clear) clear 屬性仍然是可應用於所有元素,但三個月後的第二版草案中(Appendix B: Changes from CSS1)做了修改,即現在的只可應用於 block 元素。但是你所引用的這段描述從第一版之後就沒有什麼大改動,以至於一直遺留到了十三年後的 CSS 2.1 中,並在2年後的今天才被你發現了,嗯。


推薦閱讀:

你是如何去組織項目中的 Less/Sass 代碼的?
為什麼「margin:auto」可以讓塊級元素水平居中?
如何讓input裡面placeholder水平居中?
css 使用display:inline-block的問題求解?
現在國外做網站是用 DIV + CSS,還是 table?

TAG:前端開發 | CSS |