Floating like a Butterfly Stings like a B****
7 Lessons I learned trying to "Float" in CSS whilst building the most basic HTML & CSS website. This is a nutshell of my experience in wrestling with "Float":
1. I can't wait to start using Flexbox
2. Absolute/Fixed elements will NOT float.
4. All "Floats" are made into block-level elements.
3. A "Float" doesn’t go on top of the element before it in the HTML code.
5. To stop an element from wrapping around a "Float", use "overflow:hidden"
6. If you don't specify the width, the block element’s box will shrink until its contents are visible.
7. To prevent an element being near any "Float" use the "clear" attribute.
CSS "Floats" seem simple, and are once you wrap your head around the effect they have on the elements around them. This can get unpredictable. I've had problems of vanishing nearby elements, elements wrapping around the float, elements not reacting to CSS or floats or clear floats.
In the end I had so much CSS trying to organise elements and other CSS overriding that CSS, I started from scratch. It was a learning curve. But I can say now, with a thimble o confidence, that I can now "float left."
