Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

David Kim
David Kim
943 Points
Posted by David Kim
David Kim
943 Points

What does float really do?

<div class="row">

   <div class="col">Col1</div>

   <div class="col">Col2</div>

   <div class="col">Col3</div>

</div>

<footer>&copy;2013 My Site  </footer>

when I type float:none (which is default) this is how it appears: Col1 Col2 Col3 Ā©2013 My Site

when I type float: left this is how it appears: Col1Col2Col3Ā©2013 My Site

when I type float:right this is how it appears: Ā©2013 My Site Col3Col2Col1

can someone give me a clear, succinct idea behind float? becuz I too no the basic. Essentially, why does it collide when its left and stay protected when its right? I'm very excited to hear some brilliant, smart answers!

David Kim
David Kim
943 Points
David Kim
David Kim
943 Points

mmmm that;s not how it appears, the spacing i made in the question does not show up.. sadly

1 Answer

Shay Paustovsky
Shay Paustovsky
969 Points
Shay Paustovsky
Shay Paustovsky
969 Points

Hi David,

It depends on the source order and the display value of the next element(s) you wish to float.

For Example

In the CSS Layout Basics course in the floats section, he has an image and he want to wrap a paragraph around it so he sets the image { float : left; }, Now the image based on the display value will float, like an absolutely positioned item Other elements don't know it exists, thus it sits above everything, 'floats'.

One thing I forgot to mention is that float changes the { display: value } of the floated element to inline whether it was inline-block or block.

{ float : right; } simply does the opposite, but if there is not element that makes the collision with the floated element(s_ it simply stays positioned on the right.

{ float : none; } removes the float, if there is one applied.

Hopefully this have helped

Best Wishes,

Shay

Shay Paustovsky
Shay Paustovsky
969 Points
Shay Paustovsky
Shay Paustovsky
969 Points

P.S :

Forgot to mention that, since floated elements are 'invisible' to other elements on the page, if the container of those elements is with the { display: value } of block than the container's height collapses because evidently The element(s) Doesn't exists