浮动布局

语法：
关键字：float。值：left（左浮动）;right（右浮动）。

特点：

• 元素浮动之后不占据原来的位置（脱标），下面的元素会在浮动元素的下面。
• 浮动的盒子在一行上显示。
• 行内元素浮动之后转换为行内块元素。（转行内块元素不推荐使用此方法，转行内元素最好使用display: inline-block;）。
• 浮动通常用于：文本绕图（文字不会位于浮动元素的下面）、制作导航（通常是li的浮动）、网页布局。
• 浮动的盒子一般都给宽度,浮动的盒子千万不要让他超出父盒子，超出父盒子的部分会影响下面盒子中的浮动的子盒子。
• 浮动的盒子比标准流盒子高，但是能够遮挡住标准流盒子，遮挡不住里面的图片和文字。
• 同一个父级元素的子盒子，要么都浮动，要么都不浮动。
• 浮动的盒子相互影响，不管是否在一个盒子中。
• 建议浮动的盒子都给宽高，尽量盒子之间有点距离。
• 浮动的盒子，超出父盒子宽度换行解决办法：再给浮动的盒子一个父盒子，父盒子宽度大于要显示的子盒子总宽度，然后用，overflow:hidden切掉。
• 同级相邻的浮动的盒子顶边对齐。

清除浮动

由于元素浮动之后不占据原来的位置（脱标）的缘故当父盒子没有定义高度，嵌套的盒子浮动之后，下边的元素发生位置错误，位于浮动元素的下面，所以引入了清除浮动的概念，清除浮动不是不用浮动，清除浮动产生的不利影响。

• 清除浮动的方法
  清除浮动，其实是清除浮动产生的不利影响。
  关键字：clear 值：left（清除左浮动）；right（清除右浮动）；both（清除相关所有浮动，应用最多）

  • 给父元素设置高度。
  • 额外标签法
    在最后一个浮动元素后添加一个清除浮动的标签。例如：<div style="clear: both;"></div>
  • 给父集元素使用overflow:hidden;或者overflow:auto但是，如果有内容出了盒子，外面的部分将会被隐藏，不能使用这个方法。
  • 伪元素清除浮动
    首先定义一个伪元素清除浮动，然后在父元素中调用。

.clearfix:after{
    display:block;
    clear:both;
    height:0;
    content: "";
    visibility: hidden;
    overflow:hidden;
}
.clearfix{
   zoom:1;
}

或者:双伪元素标签法

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

附录：overflow

• overflow:visible;默认值，超过元素框不会被隐藏，会显示在外面。
• overflow:hidden;超过元素框会被修剪，不会显示在外面。
• overflow:scroll;超过元素框会被修剪，但是浏览器会存在滚动条，用户可以通过滚动条来查看所有内容。
• overflow:scroll;超过元素框会被修剪，如果元素被修剪了，浏览器才会出现滚动条，用户可以通过滚动条来查看所有内容。