CSS 使用float时显示不继承

Question

我正在使用 Zurb Foundation 并且有一个带有 display: inherit !important; 的元素。我不能（至少不应该）改变这个规则，因为它是 Foundation 的一部分。

我希望此元素与其 parent 具有相同的显示，即 inline-block。但是，它的 parent 有属性 float: right，这似乎阻止了 child 继承它的 display 属性.

我写了一个基本的例子：http://jsfiddle.net/ew1fkps2/1/

HTML:

<div class="a">
    <div class="b">
        <div class="c">
            I should have display: inline-block;
        </div>
    </div>
</div>

CSS:

.a {
    display: block;
}
.b {
    float: right;
    display: inline-block;
}
.c {
    display: inherit !important;
}

我尝试添加其他线程中建议的许多属性，这些属性具有类似（但不同）的问题（overflow: hidden、position: relative...），但没有解决它。

所以我的问题是为什么会发生这种情况，我该如何解决？

Answer 1

本质上，float 属性使计算显示值 block...因此这就是被继承的内容。

参见：Float @ MDN

而不是尝试对所需的子项使用 display:inline-block，只需将它们也浮动...如下所示：

.a {
  display: block;
}
.b {
  float: right;
  background: red;
}
.c {
  background: #f06d06;
  float: left;
  padding-left: 1rem;
}

<div class="a">
  <div class="b">
    <div class="c">I'm floated</div>
    <div class="c">So am I</div>
    <div class="c">Me too.</div>
  </div>
</div>

Answer 2

问题是属性 display、float 和 position 相互作用：

9.7 Relationships between 'display', 'position', and 'float'

The three properties that affect box generation and layout — 'display', 'position', and 'float' — interact as follows:

If 'display' has the value 'none', then 'position' and 'float' do not apply. In this case, the element generates no box.

Otherwise, if 'position' has the value 'absolute' or 'fixed', the box is absolutely positioned, the computed value of 'float' is 'none', and display is set according to the table below. The position of the box will be determined by the 'top', 'right', 'bottom' and 'left' properties and the box's containing block.

Otherwise, if 'float' has a value other than 'none', the box is floated and 'display' is set according to the table below.

Otherwise, if the element is the root element, 'display' is set according to the table below, except that it is undefined in CSS 2.1 whether a specified value of 'list-item' becomes a computed value of 'block' or 'list-item'.

Otherwise, the remaining 'display' property values apply as specified.
Specified value                            | Computed value
===============================================================
inline-table                               | table
---------------------------------------------------------------
inline, table-row-group, table-column,     | block
table-column-group, table-header-group,    |
table-footer-group, table-row, table-cell, |
table-caption, inline-block                |
---------------------------------------------------------------
others                                     | same as specified

在你的情况下，第三种情况适用。因此，根据 table，inline-block 的 display 计算为 block。

CSS 使用float时显示不继承

CSS display not inheriting when using float

css

inheritance

css-float