Where in the CSS spec does it define this behavior?
As stated in these two articles...
When you float an element it becomes a block box
An element that is floated is automatically
display: block;
Example: 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>
See Question&Answers more detail:os