Welcome to the Treehouse Community
Looking to learn something new?
Adam Akers7,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:
Chris Shaw26,650 Points
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.