In the previous blog, we just have an interesting talk about css display. We have learned how to define page layout by using css display. Today, we will take about one more property which is also related to web layout that is css property
According to Mozilla document: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Floats . Originally float was introduced in order to let an element is able to float inside a column of text. The kind of thing you might get in a newspaper layout like this:
Live demo: comparison between
However, software developers are much more smart and creative than we can image, they quickly realized that they can float every element(not only for image and text) and use float for create the entire web layout. Bootstrap 3 is a popular example. They used
in their grid system layout. Nowadays, the word has changed, there are more proper technique help us to create web layout easily such as
. Bootstrap 4 also shifted their implementation from heavily depend on
. Therefor, float comes back to their original responsibility which is defined image float on the text.
Keep in mind that when you have
in your CSS code is that you need to take some precaution to make the surrounding element to encompass the floated elements, and also to avoid following elements in the code to sneak up next to it.
In case you’re not ready to switch to
and you want to solve your current problems which related to
, you can still able to use
. The following examples will show you when to use
to solve that kind of problem.
Problem : space between inline elements
By default, browsers will render an extra space between
elements. It is not the bug, it’s a feature like the space between the words. In some case, you want to remove that space but you’re not successful despite of how much you tried to remove that space. With the help from
, you can easily remove that margin, make them sit next together.
Please keep in mind that avoid using
to defined the layout as much as possible, that is not the original purpose of
. Instead using
is much better and healthy. Only use
when you actually want to make something
on others. Hope you learned some thing and see you in the next post.