浮动

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

flat属性

要浮动的元素可使用CSS中float属性来定义元素的浮动位置，

• left：往左浮动

• right：往右浮动

  浮动元素引起的问题

  浮动框不属于文档中的普通流，当一个元素浮动之后，不会影响到 块级框的布局而只会影响内联框（通常是文本）的排列，文档中的普通流就会表现得和浮动框不存在一样，当浮动框高度超出包含框的时候，也就会出现包含框不会 自动伸高来闭合浮动元素（“高度塌陷”现象）。
  正是因为浮动的这种特性，导致本属于普通流中的元素浮动之后，包含框内部由于不存在其他普通流元素了，也就表现出高度为0（高度塌陷）。

• 父元素的高度无法被撑开，影响与父元素同级的元素

• 与浮动元素同级的非浮动元素会跟随其后
• 若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响页面显示的结构

清除浮动

• 额外标签法（在最后一个浮动标签后，新加一个标签，给其设置clear：both；）
  • 优点：通俗易懂，方便
  • 缺点：添加无意义标签，语义化差
• 父级添加overflow属性（父元素添加overflow:hidden）
  • 优点：代码简洁
  • 缺点：内容增多的时候容易造成不会自动换行导致内容被隐藏掉，无法显示要溢出的元素

• 使用before和after双伪元素清除浮动

  • 优点：代码更简洁

  • 缺点：用zoom:1触发hasLayout

    .clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
    content: "";
    display: block;
    height: 0;
    clear:both;
    visibility: hidden;
    }
    .clearfix{
    *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
    }

  • 
    

• 使用after伪元素清除浮动
  • 优点：代码更简洁
  • 缺点：用zoom:1触发hasLayout

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