CSS CSS Layout Basics Page Layout with the Float Property The Float Challenge Solution

Why using clear: float???

Hi everybody,

I don't understand why do we have to use the declaration clear: left for the class col...

Can you explain me the meaning of using it in this context?


3 Answers

Christoph Walpert
Christoph Walpert
3,752 Points

In this challegene you need to .col { float: left; } in Order to have the columns next to each other. For an exercise just try changing only the width. You will see, they wont move next to each other. But if you float them, then they move next to each other. Assigning it to the class .col, is due to the fact that it is parent class of both primary and secondary? :)

That helped?

Patryk Bernasiewicz
Patryk Bernasiewicz
Pro Student 10,281 Points

There's no clear: left applied to the .col class in this video, there's only a float: left applied and it's to make the columns stick next to each other on the layout.

Sorry I made i mistake! I wanted to say float: left and not clear: float! :-)

Erik Nuber
Erik Nuber
20,628 Points

I haven't watched the video to answer your question, so will rely on the other reply from Patryk saying that there is no clear: float in the video itself.

When you float something, it allows other objects to flow around them. For example, if you float an image: right, it will allow text to flow around the left side of the object.

If you clear the float on either left or right side, or both, it changes how things will then flow.

When you clear: left you clear elements floated to the left. So an element floated to the left will end up on a line by itself with whatever is after it appearing below that floated item.

The same goes for clear: right on a floated right object.

You can clear both which means if you have two items floated both left and right you can clear each side using clear: both.