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
float:left in their grid system layout. Nowadays, the word has changed, there are more proper technique help us to create web layout easily such as
grid. Bootstrap 4 also shifted their implementation from heavily depend on
flex. Therefor, float comes back to their original responsibility which is defined image float on the text.
Keep in mind that when you have
float 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
grid and you want to solve your current problems which related to
display:inline-block , you can still able to use
float . The following examples will show you when to use
float to solve that kind of problem.
Problem : space between inline elements
By default, browsers will render an extra space between
inline-block 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
float , you can easily remove that margin, make them sit next together.
Please keep in mind that avoid using
float to defined the layout as much as possible, that is not the original purpose of
float . Instead using
grid is much better and healthy. Only use
float when you actually want to make something
float on others. Hope you learned some thing and see you in the next post.