使用 float 时 CSS 显示不继承

Question

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

我希望这个元素与其父元素具有相同的显示，即 inline-block。但是，它的父项具有属性 float: right，这似乎阻止了子项继承其 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，不如将它们也 float ...如下所示:

.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>