float 浮动

浮动值：left左浮动/right右浮动/none不浮动

浮动的特点

• 没有间隙和基线对齐问题
• 所有的标签都可以设置浮动这个属性(行内标签和块状标签都可以设置)
• 浮动元素不设置宽高时，宽高由内容决定的
• 行内标签、行内块级标签的文字会围绕着浮动标签排布(图文混编)
• 给图片设置浮动，文字会在图片周围环绕
• 脱离文档流(父元素找不到子元素，高度为0)，相当于来到了第二层级，平行于默认的文档

清除浮动带来的影响(面试题—清除浮动)

浮动带来什么影响？ 子元素设置浮动属性，父元素找不到子元素了，父元素高度为0(脱离文档流)

• css清除浮动
  • 给父元素设置一个固定的高度
  • 给父级元素设置一个css属性
    overflow：hidden；溢出隐藏
  • 给子元素设置浮动属性的最后面加一句话
    <div style="clear:both;">
• 利用伪元素来清楚浮动带来的影响
  • 给子元素设置完浮动后，需要给父元素加一个类名class="clear"
  • 需要把清除html默认样式的css样式表引入进来reset.css

.clear:after{
    display:block;
    content:"";
    clear:both;
    height:0;
    visibility: hidden;
}
当前的.clear{zoom:1} //让它自己有独立的布局，兼容IE6以下