How to use float: left correctly?

FLOAT RICE FEI:

For example, let's create a div wrap, it will be the parent element that will serve as a reference to contain the floating elements.

Inside this parent element we will have two boxes A and B, we will use them to play with the float. This will be our structure:

<div class="wrap">
  <div class="A">A</div>
  <div class="B">B</div>
</div>

.wrap{
  width:400px;
  border:1px solid green;
}
.A{
   display:block;
   background:red;
   padding:50px 0;
   width:120px;
}
.B{
   display:block;
   background:blue;
   padding:50px 0;
   width:120px;
   text-align:center;
}

Take a look at the link to get a better understanding: link

First we will float the two boxes to the left, so let's put the float in the two elements that we want to flutter

.A{float:left}
.B{float:left}

If you look in our link code you will see that you have floated the elements as intended, but something is wrong. The parent element broke down, and the rest of the page continued to float. Let's fix this.

Let's create a class clear, it will serve to reset the float after our boxes, so it will not affect the rest of the page and will also fix our parent element:

.clear{
  clear:both;
}

Now our html looks like this:

<div class="wrap">
  <div class="A">A</div>
  <div class="B">B</div>
  <div class="clear"></div>
</div>
<span>Float é fácil</span>

.wrap{
  width:400px;
  border:1px solid green;
}
.A{
  display:block;
  background:red;
  padding:50px 0;
  width:120px;
  text-align:center;
  float:left;
}
.B{
  display:block;
  background:blue;
  padding:50px 0;
  width:120px;
  text-align:center;
  float:left;
}
.clear{
  clear:both;
}

If you look at our page you will find that we have reached the desired structure: link

You must also be aware of the size of the elements, if the width of all elements exceeds the width of the parent element, some things can be pushed down, see: link

Any property that modifies the dimension of the element should also be considered for the account: margin, padding, border, width, etc.

Now let's dare more, we want one element on the right and the other on the left. It's not difficult to just use the same logic:

<div class="wrap">
  <div class="A">A</div>
  <div class="B">B</div>
  <div class="clear"></div>
</div>
<span>Float é fácil</span>

.wrap{
  width:400px;
  border:1px solid green;
}
.A{
  display:block;
  background:red;
  padding:50px 0;
  width:120px;
  text-align:center;
  float:left;
}
.B{
  display:block;
  background:blue;
  padding:50px 0;
  width:120px;
  text-align:center;
  float:right;
}
.clear{
  clear:both;
}

Papaya with sugar, right? Here's how our example was: link

Cool, now let's put the two elements to the right, just use the same prior logic right? WRONG: link

See that the boxes have been reversed, this is because box A is the first element to be displayed, so it will be the first one floated to the right.

To solve this we will create an element that will float to the right, it will house our 2 boxes. The boxes will float to the left making the effect we look for:

<div class="wrap">
  <div class="right-container">
    <div class="A">A</div>
    <div class="B">B</div>
    <div class="clear"></div>
  </div>
  <div class="clear"></div>
</div>

.wrap{
  width:400px;
  border:1px solid green;
}
.A{
  display:block;
  background:red;
  padding:50px 0;
  width:120px;
  text-align:center;
  float:left;
}
.B{
  display:block;
  background:blue;
  padding:50px 0;
  width:120px;
  text-align:center;
  float:left;
}
.right-container{
  float:right;
}
.clear{
  clear:both;
}

See how our example was link beautiful thing!

I think this is basic to working with float without having scares. But using float to build the site layout is not cool, there are many other alternatives you can and should use: grids, html frameworks, flex. Unless of course you do not worry about despairing whenever your page is displayed in a different resolution.

Although not recommended, it's good to know. Are you going to need to maintain a float mounted website?

UPDATE:

If you take a look at the code, you will see that I have made a markup in the code to define where the flushing should occur. But this is a very old technique, before CSS2, since we did not have the :before and :after selectors.

We can use a more modern technique to perform the same function:

Just create the clearfix class:

.clearfix:before,
.clearfix:after {
   content: " ";
   display: table;
}

.clearfix:after {
   clear: both;
}

.clearfix {
   *zoom: 1;
}

Just add the clear fix class on the parent element for the elements that will receive the float.

<div class="wrap clearfix">
  <div class="A">A</div>
  <div class="B">B</div>
</div>
<span>Float é fácil</span>

This will give you a cleaner code. Here's how our example was: link

Mano, the real use of float is to make a block float over a block of text, such as those newspaper columns.

It does not serve to do layout , they use it as a gambiarra since there was no standard to do this kind of thing, you can even do layout with Float but it is a horrible headache that only those who have already done and had to maintain the code know.

Take a look at Flexbox , it solves some of the problem of layout, there are frameworks which implements it for you to use with Sass and Stylus, already has a good support of the browsers and it is a beautiful thing to work with it