浮动,清除浮动

由来

浮动最早是用来控制图片，以便达到其他元素（特别是文字）实现“环绕”图片的效果。 后来发现浮动有个很有意思的事情：就是让任何盒子可以一行排列,因此我们就慢慢的偏离主题，用浮动的特性来布局了.

什么是浮动

元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。

在CSS中，通过float属性来定义浮动:

选择器{float:属性值(left,right,none);} 

浮动脱离标准流，不占位置，会影响标准流。浮动只有左右浮动。

特点

加了浮动的元素盒子是浮起来的，漂浮在其他的标准流盒子上面. 漏： 加了浮动的盒子，不占位置的，它浮起来了，它原来的位置漏 给了标准流的盒子。

清除浮动 

Why?

由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响，为了解决这些问题，此时就需要在该元素中清除浮动. 其实本质是清除浮动产生的影响. 

How?

主要三种方法:

1. 额外添加标签 :是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如 <div style=”clear:both”></div>，或则其他标签br等亦可. 优点: 法通俗易懂,书写方便. 缺点:添加了许多无意义标签,结构化差.
2. 父级元素添加overflow属性方法: 可以给父级添加： overflow  hidden/auto/scroll 都可.  优点:代码简洁,缺点:内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素.
3. 使用after伪元素清除浮动: 

   .clearfix:after {  content: "."; display: block; height: 0; clear: both; visibility: hidden;  }   
   
   .clearfix {*zoom: 1;}   /* IE6、7  */

 

           优点: 符合闭合浮动思想 结构语义化正确

 

 

初学者简单总结, 欢迎指正补充.