Warum verhalten sich Inline-Elemente beim Floaten wie Elemente auf Blockebene?
Wo in der CSS-Spezifikation definiert es dieses Verhalten?
Wie in diesen beiden Artikeln angegeben ...
Wenn Sie ein Element schweben lassen, wird es zu einer Blockbox
Ein Element, das schwebend ist, wird automatischdisplay: block;
Beispiel https: //jsfiddle.net/kennethcss/y6cmgubt
a {
/* for looks */
background-color: #e1e1e1;
line-height: 30px;
text-align: center;
/* Comment "float: left" out to test. Once the float is removed, neither
* the height or width have any effect on the anchor because its default
* display is inline.
*/
height: 30px;
float: left;
width: 100px;
}
<nav>
<a>Nav Item 1</a>
<a>Nav Item 2</a>
<a>Nav Item 3</a>
</nav>