gsoldateli/using-float.md

## using-float.md

      
    Raw
  

              using-float.md
            
          
    Explain the purpose and function of thefloat property in positioning elements. List and explain the different values this property can take. Give an example of how to use this property

The CSS float Property

Category: Positioning Elements
The float property is responsible by placing the element at left or right side of its container enabling texts or any inline element to conform around it.
Flow and float

Before talking about flow we need to talk about the HTML document flow.
HTML by itself have the ability to:

Be fluid, adapt to the browser size.
Be ordered, put logically one element after another (or one inside other) as you write them in your document.

For instance, block elements by default ocuppies 100% of its container or the browser width.
Sometimes this natural fluidity doesn't match the document design needs. This is when the float property is needed.
Float is responsible for breaking the HTML natural flow, defining the element's position to the left or right side of its container.
Please take a look to the example below:
<div class="float-container">
   FLOAT CONTAINER
   <div class="w20 float-left">Element Floated to left</div>
   <div class="w20 float-right">Element floated to right</div>  
</div>
div {
  background-color: #ccc;
  box-shadow: 1px 1px 12px #333;
  text-align: center;
  padding: 3rem;
  font-size: 1.5rem;
  color: #333;
  
}

.w20 {
  width: 20%;
}

.float-left {
  float: left;
}

.float-right {
  float: right;
  background-color: #689F38;;
}

.float-container {
  background-color: red;
  color: #fff;
  padding: 0;
}
Will result in these two boxes and a broke red container:

As said above, display block elements takes 100% width of its container, this is why when we use float is needed to define element's width lower than 100% to see the floating effect. This is made by the css class .w20.
It's important to remember that floating elements disrupts the HTML default rendering flow. To show you this, I've added a background-color:red; to the .float-container.
As you may see, the float container doesn't understand that it have two big boxes inside it. It happens because the float property breaks the browser rendering flow.
How to fix this? Check the section below.
clear property to the rescue.

The clear property is responsible for telling the browser to restore the flow before the "cleared" element.
To illustrate how this works we are going to add a new div outside the .float-container div. With the following content: "I AM OUTSIDE .float-container"
<div class="float-container">
   FLOAT CONTAINER
   <div class="w20 float-left">Element Floated to left</div>
   <div class="w20 float-right">Element floated to right</div>  
</div>

<div>I AM OUTSIDE .float-container</div>
Resulting in :

The div "I AM OUTSIDE .float-container" doesn't understand that are two big boxes above it. Again... this happens because the float property assigned to those boxes.
To solve this behavior and restore the flow we need to assign the clear property to the "I AM OUTSIDE .float-container".
The clear property notify the browser to not take the previous floats in consideration.
clear accepts three main values:

left: To not take in consideration float:left elements positioned before.
right: To not take in consideration float:right elements positioned before.
both: To not take in consideration float:left and float:right elements positioned before.

So this will look like:
<div class="float-container">
   FLOAT CONTAINER
   <div class="w20 float-left">Element Floated to left</div>
   <div class="w20 float-right">Element floated to right</div>  
</div>

<div class="clear">I AM OUTSIDE .float-container</div>
div {
  background-color: #ccc;
  box-shadow: 1px 1px 12px #333;
  text-align: center;
  padding: 3rem;
  font-size: 1.5rem;
  color: #333;
  
}

.w20 {
  width: 20%;
}

.float-left {
  float: left;
}

.float-right {
  float: right;
  background-color: #689F38;;
}

.float-container {
  background-color: red;
  color: #fff;
  padding: 0;
}

.clear {
  clear:both;
}

When we added clear:both; to the "I AM OUTSIDE .float-container" div the browser understood that this element shouldn't have to be disturbed by float:left; and float:right anymore.
That's pretty good, but how do we fix the .float-container ? It still doesn't understand that there are two big boxes inside it.
We must use a trick commonly called as clearfix. It will be explained below.
clearfix workaround.

The clearfix consists in adding a display:block;clear:both; element after the container that have floated elements inside it. In our case, this element is the .float-container.
We do that by using the CSS pseudo class :after into the .float-container class. Looking like something as the example below:
.float-container {
  background-color: red;
  color: #fff;
}

.float-container:after {
  content: " ";
  display:block;
  clear:both;
}
Finally .float-container is fixed because the .float-container:after adds an invisible block element with clear:both; after the .float-container content.
;
Final thoughts

To trully master the float concept you must have in mind that floats are related to width and clear properties.
Where the width defines the width of the floated element. And the clearis responsible for telling the browser to stop the float disturbance to the HTML document flow.
You will also need to put the clearfix concept inside your mental toolbox, recurring to it whenever things go wild with the floated elements.
PS:. The live example of this article can be found HERE
Guilherme Soldateli
09/25/2017
Career Path 3: Modern Frontend Developer
No results found