Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How does CSS treat a float like, internally? [closed]

Tags:

css

css-float

Does it see it as an absolutely positioned (in reference to its parent container) block level element?


2 Answers

a float element is 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

source: https://developer.mozilla.org/en-US/docs/CSS/float

so, it is different from positioned elements: https://developer.mozilla.org/en-US/docs/CSS/position

like image 78
Luca Avatar answered Dec 09 '25 14:12

Luca


You are partly right, floated element create a new block formatting context and are taken out of the document flow, just like absolutely position elements.

However, a left floated element is placed leftmost inside it's parent element and treated as block element (can have width and bottom/top margins). The other content flows right from the element (respecting it's dimensions). Analogous for float right. This is the point where the differ from absolute elements.

Absolutely positioned elements are positioned based on the first ancestor with position other than static.

There are several implications, which you can read in the w3c spec.

Like absolute positioned elements due to the fact that it's taken out of the normal element flow, parents will "collapse", so you have to clear the float or declare the overflow property on the parent.

like image 33
Christoph Avatar answered Dec 09 '25 15:12

Christoph