Overflow property applied with float
I have created this simple HTML page and was experimenting with 'float' property of CSS. The markup is attached. The main problem is: When declaring 'overflow' as 'hidden' I was expecting that all the content that is overflowing will be hidden (or not visible). But, here the container is stretching all the way down to contain all the elements inside it. So what is going on here and how 'overflow' is working here?
3 Replies
may i ask, are you following a tutorial, course or something where you got this from?
The float-technique to position elements is really outdated
Actually I am following a course by Edx ("HTML5 Coding Essentials and Best Practices"). They suggested an article to go through while teaching about the 'float'. So, I am stuck here.
Normally floats are used for images within text. So the text can nicely wrap around it.
for positioning elements (sections, articles, divs...) there are better techniques (flex, grid, columns, even inline-blocks)