Clearing floats has been become a necessity in front end development. It’s no
amazing then that over the years, we have been uncovered to multiple
techniques for clearing floats, in the present age more famous known as clear fix
methods. Before we deep search into the various methods, let’s take a look at the
problem that clear fix methods attempt to solve.
The setup el1 and el2 are floated side by side inner containerizes, and there is a
main element after container.
The preferred outcome we want container to expand to the height of its child
elements for example the taller of either .el1 or .el2 and we want main to be after
container.
The actual output container break down and takes on no height at all, as if there
is nothing in it, putting main in an undesired location and potentially motivating
any backgrounds or borders on containers to be missed.
Based on the above scenario our markup may look something like this.
<div class="container">
<div class="el-1">A long string of stuff here </div>
<div class="el-2">A short string of stuff here </div>
</div>
<div class="main">
Here
.el1, .el2 {
Float: left;
Width: 55%;
}
El-1
{
/* styles for .el-1 here */
}
.el-2 {
/* styles for .el-2 here */
}
.main {
/* styles for .main here */
}
This method is old school and old school is reletive, and of course the real old
school method contain the use of tables for layout which case clearinng float
mean nothing. So consider this method old school as far as the existence of floats
goes.
Second Method
The idea is straightforward Insert an empty element that has the clear property
announced on it at the ground of the container of floated elements. It iss long
tradition to use a specific class to complete this, so that you can reuse it in your
HTML. This is the classic css structure.
clear {
clear: both;
}
And the HTML might look like this.
<div class="container">
<div class="el1">I'm floated...</div>
<div class="el2">I'm also floated...</div>
<br class="clear">
</div>
0 comments:
Post a Comment