Floating layout CSS-

float

Floating properties

1. There are left floating elements float (float: left) and right float (float: right) two kinds
2. Recall floating elements float left or to the right, across the border of the parent element, other elements came to a halt
3. Block floating may be adjacent elements together and, beyond the width of the parent on the linefeed
4. Let floating elements or block elements within a row are automatically converted to row within the block elements (the blocks at this time does not have the line element clearance issues)
5. No back float floating element will occupy the position of the float, the float no text will avoid the floating elements to form words about the effect of FIG.
6. If you do not set the size of the parent element (generally highly not set), the overall floating in the parent element can not be softened parent element, the parent element need to clear the floating
7. The combined no vertical margin between the float

Clear float

• Parent upper-heating property overflow: hidden

• Plus an empty div, style attributes clear to him after the last child element: both (not recommended)

• Use clear float mature style classes, clearfix

  .clearfix : after,.clearfix : before {content : '';display : table;}
  .clearfix : after {clear : both ;}
  .clearfix {zoom :1 ;}

  Clear to use floating:

  .con2{.... overflow : hidden}
  或者
  <div class='con2' clearfix>
  
  </div>