Are floats needed for a html/css structure/layout

[Travercraig]

I've been following this guide: https://www.youtube.com/watch?v=Sk6NYOW7_do

 

However there is a problem

 

What exactly are the floats for? I didn't bother using floats and still achieved the desired result. The only difference to my design is that I use % rather than px for the width. For example the wrapper has a width of 100% the header 100% width and the rest of the areas have 90% of the total width. Floats didn't seem to do anything but hinder the design so it partially floated left. As soon as I removed the floats and added margin: auto to all the areas it all centred nicely. Are floats not compatible with using %? I'm quite confused.

[xQubeZx]

If I'm right they are used beacuse sometimes it is easier to use float left/right instead of adding a huuuge marign. But I'm pretty bad at CSS so don't trust me haha.

[Hazy125]

Floats aren't just for page layout, I usually tend to stay away from floats as much as possible, because as you said, they hinder a lot because you also have to add clears and hotfixes and what not to make sure it doesn't completely ruin everything else on the page. That being said, floats have a tonne of use still and sometimes you just have to use them. Examples being a floated navigation menu is generally much easier than any other navigation menu unless you have to center the menu of course. But the main reason for using floats is the interactions it has with text, so rather than trying to use floats for the core page payout, you might find yourself using them for smaller sections of layout revolving around you content. For example, doing something like this without using floats is a nightmare

 

[Marxtai]

When I started I also avoided floats, and used inline-block instead most of the time - when something else than block was needed.

 

However, inline-block have that annoying margin and it's easier to just float the elements, since they don't have that margin issue. You simply have to add a clearfix (if you need, most of the time you will) so you can make a class for that and apply it to any container that will contain float elements.

 

Also, as demonstrated above sometime they are the only easy solution when you want your elements to behave well with blocks of text. 

 

With the new display flex, I won't have to rely on float as much anymore, flex has a lot of very nice features, but until it's more widely supported I keep using floats.