Advertisment

Learn About clearing Floats techniques?

 Clearing Floats techniques.

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>
Share on Google Plus

About bilal S

I am founder of javaHint.com and a Computer Scientist. I have studied Computer Science and currently enrolled research student .I am providing information about computer, s web Programming Languages, Architecture and All other basic information Such as Information Technology and Computer Science. For Any Query and suggestion you are always welcome to contact me.
    Blogger Comment
    Facebook Comment

0 comments:

Post a Comment