Interesting discussion, most users aren’t too fussed with these little nuances, so it’s nice to see someone interested!
To begin with I’d like to point out that I’m quite rusty on HTML & CSS, so everything I say might not be 100% accurate, and I agree with the points @mtf has made so far.
Dealing with Question 2 first: As far as I’m aware an element such as
a has a width implicitly set by the text in it, i.e. “auto”. Think about the simple underline property, if a link was to be underlined, it must have a defined width in order to know how much to underline.
Question 1 in is a little trickier: floating the
<a> to the right pushes it’s “box” as far right as possible, this takes the containing
div with it, as a result of this it’s height fills up (almost as if it has been squashed) to the max allowed by the box hierarchy. Whereas floating the div moves the container and the inside follows, no squashing needed.
Question 3: This is linked, to question 1. As far as I can figure out floating the
<a> fills it up to the max of it’s container. By changing a property of the
nav this max property is also changed. For example if you replaced the
nav tag with a
div tag it doesn’t make any difference if you float the
a or float the
In short: it’s a quirk of the box model caused by bootstrap and the
Recommed reading this article on floats: https://designshack.net/articles/css/everything-you-never-knew-about-css-floats/