问答详情
源自:3-1 Overflow与块状格式上下文

清除浮动的提问

为元素为什么display:table呢? 不能使block

提问者:伊思 2015-06-11 15:34

个回答

  • Jakes
    2015-08-01 12:51:13

    涉及到margin折叠。

    W3C:http://www.w3.org/TR/CSS2/tables.html#anonymous-boxes

    Any table element will automatically generate necessary anonymous table objects around itself, consisting of at least three nested objects corresponding to a 'table'/'inline-table' element, a 'table-row' element, and a 'table-cell' element.

    所以display:table 会产生匿名的table-cell元素,进而产生BFC从而避免margin折叠。

    It does not need to be display: table. The difference, however, is worth to be mentioned: If you use display: block instead of display: table, your margins will collapse as usual. If you use display: table, however, you will lose margin collapse between siblings and the first/last children of the element where you've applied the clearfix on, which might or might not be a desired feature.

    代码演示