Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

CSS

Adam Akers
Adam Akers
7,357 Points

Alignments with floats

I am on the "Floats" video of "The Box Model" stage. Something that is bugging me is the use of float twice, first for the image (which I totally understand what it does and why it was used), but the second time in the <p> tag it is also used. While I see what it does to the paragraph, aligning it so it does not wrap around the image, I would like to know why. Does using the float left set up some sort of barrier? Codepen link below:

http://codepen.io/anon/pen/BFujl

1 Answer

Chris Shaw
Chris Shaw
26,650 Points

Hi Adam,

The below is quoted from the Mozilla Developer Network float documentation.

The float CSS property specifies that an element should be taken from the normal flow and placed along the left or right side of its container, where text and inline elements will wrap around it. A floating element is one where the computed value of float is not none.

Essentially anytime you have two floats next to each other they cancel one-another out causing a sort of inline-block effect whereas a single float causes the element it's applied on to become partially disconnected from the normal page flow allowing other child elements to simply align above, below and around it.

Adam Akers
Adam Akers
7,357 Points

Awesome! Exactly what I was looking for. Thanks Chris!