#The Fun Web: Floats vs Flexbox

Check out my:
Next Blog Entry | Previous Blog Entry

Since no one will talk on this most likely crucial topic, why don’t I address this myself?! As someone who is an intermediate learner in html and CSS, I have always seen myself either using floats or flexbox, mostly floats. There is one thing in common about them is that they both arrange elements, but in different ways. Both also have their advantages and disadvantages.

FLOATS:

Floats are one of the older CSS layout techniques. They were originally designed to allow text to wrap around elements such as images, but developers later used them for entire page layouts before Flexbox and Grid existed. In modern CSS, floats are not really the go-to option for making layouts. In terms of being easy, I would rate this one a 9/10, why? All you need is;

.container {

float: left;

}

Yes, just that, and that one alone solves most of the problems on arrangement, at least most of em. I personally use this when I’m doing a quick project. Occasionally when I have 2 elements, there is need to actually adjust the widths so that the two elements can sit on a line. Take for instance:

.container1 {

float: left;

width: 500px;

}

.container2 {

float: right;

width: 300px;

}

Ignoring margins and padding, the two elements would require at least 800px of horizontal space to sit side by side. Yes, it's that simple! For basic positioning, a float can quickly arrange elements without much code. However, as layouts become more complex, floats can introduce challenges that modern tools like Flexbox handle more easily.

And if you are a person that loves to fancy your CSS with small details like me, you can add some little CSS changes like ‘margin’, ‘padding’, ‘border’, ‘box-shadow’ and many more.

There are also some visible disadvantages. Many float-based layouts use fixed widths, which can make responsiveness harder to manage. But the good news is that, they can be adjusted! If you like the layout you’ve used by your float, you can use the ‘@media’ tag to adjust it on other screen sizes like tablets and mobile phones- this is called media responsiveness.

Fun Tip: To check the way your layout works on other screens [smaller and bigger], use the shortcut ‘Ctrl + Shift + I’ and click on the dropdown arrow on the toolbar at the top and use any of the options given. If you want to experiment more, use ‘width’ and ‘height’ editor that is beside it and adjust to your liking.

FLEXBOX:

This type of element is modern and it does have a lot of benefits, as I’ve learned. Flexbox was initially built with making layouts in mind. But unfortunately, I am still an amateur in this aspect, but I will provide all the information I already know. Unlike floats, this element doesn’t just use one value [in floats, it is: float: left;], though it also has a universal value [display: flex;]. Like this:

.container {

display: flex;

}

.box {

width: 200px;

}

Just by adding that, the elements naturally line up together. No floating, clearing, or manually positioning elements is required. [The box, are the elements with div class ‘box’, therefore any div class labelled ‘box’ in the container will line up side by side]. And then for more styling, you can use the variety of properties that flexbox offers. Like flex-direction, justify-content, align-items… and the likes. I won’t explain them however in this blog.

Overall: