Besides the simple example of wrapping text around images,

you can use floats to create entire web layouts.

For example, you can float the logo and navigation in the header,

the content columns in a container, or links in a footer.

As we learned in the previous video, by default,

browsers display content in the order that it's encountered in the markup.

But we can manipulate that order with floats.

Currently, the elements in the header are in the normal document float.

The site name and

navigation are stacked on top of each other as they appear in the markup.

In this lesson, I'm going to lay out the name and

navigation we used in the previous section using the float method.

That way you'll have a better understanding of how float layout works

compared to the inline and inline block methods you learned about earlier.

First, I want to place the site's name element over to the left of the header.

So, back in my stylesheet, inside the media query,

I'll create a new rule that targets the class name.

Inside the rule I'll add a float property and set the value to left.

When I go back and refresh the page,

you can see how the element floats to the left side of the header.

Notice how the navigation no longer honors the space the name element

used to take up on the page.

If I inspect the name element with the Chrome developer tools,

notice how the element appears to be inside the main navigation.

Similar to what happened in the previous video when I floated the image

next to the paragraphs.

And its width no longer takes up an entire line.

Now it's only as wide as its content.

Remember, the floated element is technically a block-level element.

But it's behaving like an inline element, and

any surrounding content flows around it.

You can also put several floats on the same line.

So to adjust this layout, I'm going to apply a float to the main nav element.

I wanna place the navigation on the right side of the header.

Back in my stylesheet, inside the media query and right above the name rule,

I'm going to create a new rule that targets the class name nav.

I'll give it a float property and set the value to right.

When I go back and refresh the page, we can see that both the name and

main nav element are now on the same line.

But the navigation items are still on separate lines.

To display a horizontal navigation,

I'm going to float the list items inside main-nav.

So back in my CSS, right below the main-nav rule I'll create a new rule

that targets the li elements inside main-nav.

Then I'll float them left by typing float:

left; So now the navigation

items are floated next to each other in the same order they appear in the markup.

Now notice what happens if I float the navigation items right.

So I'll go back to the main nav li rule and

change the float value from left to right.

Floating the list items right reverses the order of the navigation links,

because it pushes the very first list item to the right side of its ul container.

Then the other items float next to it in the order written.

I'll go ahead and keep my navs floated left moving forward.

So I'll just undo that and change the float value back to left.

With floats, we don't have to worry about the extra white space that can appear

when using inline or inline block display.

Floated elements will sit adjacent to each other

regardless of the HTML white space between them.

Now, I want some separation between each nav item, so I'll go back to my stylesheet

and apply a left margin to the list items inside main-nav.

So below the float declaration,

I'll add a margin-left property and set the value to 12 pixels.

The floats inside the header caused a common undesirable layout behavior you'll

likely face when using floats.

If a block level element contains floated element, its height collapses.

Notice how the header's height collapsed.

So its height doesn't fully expand to contain the floated site name and

navigation elements.

Now this isn't a browser bug.

It's just how floats are supposed to work in the browser, but this is a good example

of where you can get into trouble when using floated elements.

In the next video, I'll show you why this happens in float layouts and

how to prevent it from happening.