CODEWITHSUNDEEP
htmlcss
stoex
stoex

Reputation: 113

After float: left and float: right clear: both?

I have a quick question. I created a navigation bar with this html-code:

<!-- Header and searchbar -->
<header>
    <div class="header">

        <div class="left">  
                <a href="">
                <img id="logo" src="pictures/airbnb2.png" alt="Airbnb Logo"> 
            </a>
        </div>

        <nav>
            <ul class="right navbar">
                <li><a href="">Gastgeber werden</a></li>
                <li><a href="">Hilfe</a></li>
                <li><a href="">Registrieren</a></li>
                <li><a href="">Log-in</a></li>
            </ul>
        </nav>

    </div>
</header>

So my question is how to clear this code correctly? Do i have to do clear: right in the next div or clear: both? I floated left (class left) first and afterwards right (class right).

Thanks ;)

Upvotes: 1

Views: 1177

Answers (1)

PhobosFerro
PhobosFerro

Reputation: 1001

clear:left Is a keyword indicating that the element is moved down to clear past left floats.

Since you have a float: right right after float: left, if you only use clear: right your element will appear under the header, because you cleared the last floating object.

If you use clear: left, you will clear the left floating element, but not the right one, so the next elements will appear under the left floating one.

So in this case, if you use clear: both, you would be doing the same as doing clear: right.

clear: both is used so no floating elements are on either side of the new element, which is not what you're doing.

https://developer.mozilla.org/en-US/docs/Web/CSS/clear

Upvotes: 1

Related Questions