Float Behavior | CSS

1. Float property [1]
1. Changes the behavior of that element and the block level elements that follow it in normal flow.
1. Removing normal flow and element moved from left to right instead.
2. The surrounding content floats around the floated item.
2. Property values
1. <left>, <right>, <none>, <inherit>
3. Block-level elements behavior with float or display property
4. Float property behaviors with parent
1. Float element naturally collapses its parent element. The width of a child element crosses the parent width they don't depend on child element float property. But height is collapsed when float is present in a child element.  Complication 
2. Solution 1
1. Add <div style="clear:both">.
2. Just create a new line.
3. Solution 2
4. Solution 3
5. Behavior with image
1. Suppose your element has inline properties like image. Use float(left/right) with img then text wrap image. Image 3.
6. Brittle
1. Bottom margin mismatch: Use padding bottom in parent or use hr with margin bottom. If double margin appears allow inline-block with float element.
2. Some pixel cross: Add height/width with child element.
3. Image cross parent div widely : Use overflow hidden.

Ref[1]: https://developer.mozilla.org/en-US/docs/Learn/CSS/
⌚ CSS3 Essentials