What does the CSS rule clear both do

Question

What does the following CSS rule do    clear   clear  both      And why do we need to use it

User · Answer

CSS float and clear Sample Fiddle Just try to remove clear both property from the div with class sample and see how it follows floating divs

User · Answer

I won t be explaining how the floats work here  in detail   as this question generally focuses on Why use clear  both  OR what does clear  both  exactly do     I ll keep this answer simple  and to the point  and will explain to you graphically why clear  both  is required or what it does     Generally designers float the elements  left or to the right  which creates an empty space on the other side which allows other elements to take up the remaining space   Why do they float elements   Elements are floated when the designer needs 2 block level elements side by side  For example say we want to design a basic website which has a layout like below       Live Example of the demo image   Code For Demo   x000D   x000D      CSS      x000D   x000D         Not related to floats   clear both  used it for demo purpose only    x000D      box-sizing  border-box  x000D      -moz-box-sizing  border-box  x000D      -webkit-box-sizing  border-box  x000D    x000D   x000D  header  footer   x000D      border  5px solid  000  x000D      height  100px  x000D    x000D   x000D  aside   x000D      float  left  x000D      width  30   x000D      border  5px solid  000  x000D      height  300px  x000D    x000D   x000D  section   x000D      float  left  x000D      width  70   x000D      border  5px solid  000  x000D      height  300px  x000D    x000D   x000D   clear   x000D      clear  both  x000D    x000D   lt  -- HTML -- gt  x000D   lt header gt  x000D      Header x000D   lt  header gt  x000D   lt aside gt  x000D      Aside  Floated Left  x000D   lt  aside gt  x000D   lt section gt  x000D      Content  Floated Left  Can Be Floated To Right As Well  x000D   lt  section gt  x000D   lt  -- Clearing Floating Elements-- gt  x000D   lt div class  clear  gt  lt  div gt  x000D   lt footer gt  x000D      Footer x000D   lt  footer gt  x000D   x000D   x000D    Note  You might have to add header  footer  aside  section  and other HTML5 elements  as display  block  in your stylesheet for explicitly mentioning that the elements are block level elements   Explanation   I have a basic layout  1 header  1 side bar  1 content area and 1 footer   No floats for header  next comes the aside tag which I ll be using for my website sidebar  so I ll be floating the element to left      Note  By default  block level element takes up document 100  width    but when floated left or right  it will resize according to the   content it holds     Normal Behavior Of Block Level Element Floated Behavior Of Block Level Element   So as you note  the left floated div leaves the space to its right unused  which will allow the div after it to shift in the remaining space    div s will render one after the other if they are NOT floated div will shift beside each other if floated left or right   Ok  so this is how block level elements behave when floated left or right  so now why is clear  both  required and why   So if you note in the layout demo - in case you forgot  here it is    I am using a class called  clear and it holds a property called clear with a value of both  So lets see why it needs both   I ve floated aside and section elements to the left  so assume a scenario  where we have a pool  where header is solid land  aside and section are floating in the pool and footer is solid land again  something like this      So the blue water has no idea what the area of the floated elements are  they can be bigger than the pool or smaller  so here comes a common issue which troubles 90  of CSS beginners  why the background of a container element is not stretched when it holds floated elements   It s because the container element is a POOL here and the POOL has no idea how many objects are floating  or what the length or breadth of the floated elements are  so it simply won t stretch    Normal Flow Of The Document Sections Floated To Left Cleared Floated Elements To Stretch Background Color Of The Container    Refer  Clearfix  section of this answer for neat way to do this  I am using an empty div example intentionally for explanation purpose   I ve provided 3 examples above  1st is the normal document flow where red background will just render as expected since the container doesn t hold any floated objects   In the second example  when the object is floated to left  the container element  POOL  won t know the dimensions of the floated elements and hence it won t stretch to the floated elements height     After using clear  both   the container element will be stretched to its floated element dimensions     Another reason the clear  both  is used is to prevent the element to shift up in the remaining space   Say you want 2 elements side by side and another element below them    So you will float 2 elements to left and you want the other below them    div Floated left resulting in section moving into remaining space Floated div cleared so that the section tag will render below the floated divs      1st Example      2nd Example    Last but not the least  the footer tag will be rendered after floated elements as I ve used the clear class before declaring my footer tags  which ensures that all the floated elements  left right  are cleared up to that point     Clearfix  Coming to clearfix which is related to floats  As already specified by  Elky  the way we are clearing these floats is not a clean way to do it as we are using an empty div element which is not a div element is meant for  Hence here comes the clearfix   Think of it as a virtual element which will create an empty element for you before your parent element ends  This will self clear your wrapper element holding floated elements  This element won t exist in your DOM literally but will do the job   To self clear any wrapper element having floated elements  we can use   wrapper having floated elements after       Imaginary class name      content        clear  both    display  table      Note the  after pseudo element used by me for that class  That will create a virtual element for the wrapper element just before it closes itself  If we look in the dom you can see how it shows up in the Document tree     So if you see  it is rendered after the floated child div where we clear the floats which is nothing but equivalent to have an empty div element with clear  both  property which we are using for this too  Now why display  table  and content is out of this answers scope but you can learn more about pseudo element here   Note that this will also work in IE8 as IE8 supports  after pseudo     Original Answer   Most of the developers float their content left or right on their pages  probably divs holding logo  sidebar  content etc   these divs are floated left or right  leaving the rest of the space unused and hence if you place other containers  it will float too in the remaining space  so in order to prevent that clear  both  is used  it clears all the elements floated left or right   Demonstration   ------------------ ---------------------------------- div1 Floated Left  Other div takes up the space here ------------------ ----------------------------------   Now what if you want to make the other div render below div1  so you ll use clear  both  so it will ensure you clear all floats  left or right  ------------------ div1 Floated Left  ------------------  lt div style  clear  both   gt  lt  --This  lt div gt  acts as a separator-- gt  lt  div gt  ---------------------------------- Other div renders here now ----------------------------------

User · Answer

Mr  Alien s answer is perfect  but anyway I don t recommend to use  lt div class  clear  gt  lt  div gt  because it just a hack which makes your markup dirty  This is useless empty div in terms of bad structure and semantic  this also makes your code not flexible  In some browsers this div causes additional height and you have to add height  0  which even worse  But real troubles begin when you want to add background or border around your floated elements - it just will collapse because web was designed badly  I do recommend to wrap floated elements into container which has clearfix CSS rule  This is hack as well  but beautiful  more flexible to use and readable for human and SEO robots

User · Answer

The clear property indicates that the left  right or both sides of an element can not be adjacent to earlier floated elements within the same block formatting context  Cleared elements are pushed below the corresponding floated elements  Examples   clear  none  Element remains adjacent to floated elements   x000D   x000D  body   x000D    font-family  monospace  x000D    background   EEE  x000D    x000D   float-left   x000D    float  left  x000D    width  60px  x000D    height  60px  x000D    background   CEF  x000D    x000D   float-right   x000D    float  right  x000D    width  60px  x000D    height  60px  x000D    background   CEF  x000D    x000D   clear-none   x000D    clear  none  x000D    background   FFF  x000D    x000D   lt div class  float-left  gt float  left  lt  div gt  x000D   lt div class  float-right  gt float  right  lt  div gt  x000D   lt div class  clear-none  gt clear  none  lt  div gt  x000D   x000D   x000D    clear  left  Element pushed below left floated elements   x000D   x000D  body   x000D    font-family  monospace  x000D    background   EEE  x000D    x000D   float-left   x000D    float  left  x000D    width  60px  x000D    height  60px  x000D    background   CEF  x000D    x000D   float-right   x000D    float  right  x000D    width  60px  x000D    height  120px  x000D    background   CEF  x000D    x000D   clear-left   x000D    clear  left  x000D    background   FFF  x000D    x000D   lt div class  float-left  gt float  left  lt  div gt  x000D   lt div class  float-right  gt float  right  lt  div gt  x000D   lt div class  clear-left  gt clear  left  lt  div gt  x000D   x000D   x000D    clear  right  Element pushed below right floated elements   x000D   x000D  body   x000D    font-family  monospace  x000D    background   EEE  x000D    x000D   float-left   x000D    float  left  x000D    width  60px  x000D    height  120px  x000D    background   CEF  x000D    x000D   float-right   x000D    float  right  x000D    width  60px  x000D    height  60px  x000D    background   CEF  x000D    x000D   clear-right   x000D    clear  right  x000D    background   FFF  x000D    x000D   lt div class  float-left  gt float  left  lt  div gt  x000D   lt div class  float-right  gt float  right  lt  div gt  x000D   lt div class  clear-right  gt clear  right  lt  div gt  x000D   x000D   x000D    clear  both  Element pushed below all floated elements   x000D   x000D  body   x000D    font-family  monospace  x000D    background   EEE  x000D    x000D   float-left   x000D    float  left  x000D    width  60px  x000D    height  60px  x000D    background   CEF  x000D    x000D   float-right   x000D    float  right  x000D    width  60px  x000D    height  60px  x000D    background   CEF  x000D    x000D   clear-both   x000D    clear  both  x000D    background   FFF  x000D    x000D   lt div class  float-left  gt float  left  lt  div gt  x000D   lt div class  float-right  gt float  right  lt  div gt  x000D   lt div class  clear-both  gt clear  both  lt  div gt  x000D   x000D   x000D    clear does not affect floats outside the current block formatting context   x000D   x000D  body   x000D    font-family  monospace  x000D    background   EEE  x000D    x000D   float-left   x000D    float  left  x000D    width  60px  x000D    height  120px  x000D    background   CEF  x000D    x000D   inline-block   x000D    display  inline-block  x000D    background   BDF  x000D    x000D   inline-block  float-left   x000D    height  60px  x000D    x000D   clear-both   x000D    clear  both  x000D    background   FFF  x000D    x000D   lt div class  float-left  gt float  left  lt  div gt  x000D   lt div class  inline-block  gt  x000D     lt div gt display  inline-block  lt  div gt  x000D     lt div class  float-left  gt float  left  lt  div gt  x000D     lt div class  clear-both  gt clear  both  lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

When you want one element placed at the bottom other element you use this code in CSS  It is used for floats   If you float content you can float left or right    so in a common layout you might have a left nav  a content div and a footer   To ensure the footer stays below both of these floats  if you have floated left and right  then you put the footer as clear  both   This way it will stay below both floats    If you are only clearing left then you only really need to clear  left     Go through this tutorial

[css] What does the CSS rule "clear: both" do?

Examples related to css

Examples related to css-float