CSS-дисплей не наследуется при использовании float

Question

Я использую Zurb Foundation и имеет элемент с display: inherit !important;. Я не могу (ну, по крайней мере, не должен) менять это правило, поскольку оно является частью Фонда.

Я хочу, чтобы этот элемент имел тот же дисплей, что и его родительский элемент, который равен 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 на нужных детей, просто плывут их также ... следующим образом:

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

трех свойств, которые влияют на формирование коробки и расположение - 'дисплей', 'позиция', и 'флоат' - взаимодействуют следующим образом:

1. Если 'display' имеет значение 'none', то 'position' и 'float' не применяются. В этом случае элемент не генерирует поля.
2. В противном случае, если 'position' имеет значение «абсолютное» или «фиксированное», поле абсолютно позиционируется, вычисленное значение 'float' - «нет», а отображение задано в соответствии с приведенной ниже таблицей. Положение шкафа будет определяться 'top', 'right', 'bottom' и 'left' и с блоком.
3. В противном случае, если «float» имеет значение, отличное от «none», поле плавает, а «display» устанавливается в соответствии с приведенной ниже таблицей.
4. В противном случае, если элемент является корневым элементом, «отображение» задается в соответствии с приведенной ниже таблицей, за исключением того, что в CSS не определено 2.1, является ли указанное значение «list-item» принятым значением «block» 'или' list-item '.
5. В противном случае оставшиеся значения свойств 'display' применяются, как указано.

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 

В вашем случае, третий случай применим. Таким образом, согласно таблице, display из inline-block вычисляет до block.