浮动原理和清除浮动

1.浮动的基本原理

浮动-----主要是为了让一些标签并排显示

浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。浮动框不属于文档中的普通流（文档流），即脱离了文档流，当一个元素浮动之后，不会影响到块级框的布局而只会影响内联框（通常是文本）的排列，文档中的普通流就会表现得和浮动框不存在一样，当浮动框高度超出包含框的时候，也就会出现包含框不会自动伸高来闭合浮动元素。

2.如何清除浮动

主要有三种方式

-----通过设置父元素 overflow 或者display：table或者为父元素也添加float 属性来清除浮动，但这样做会出现一系列其他的问题

-----增加一个额外的空白标签

    <div style="clear:both;"></div>

    优点：代码量少，而且易懂；

      缺点：是多了个没有任何语义的空标签，不利于后期维护

-----使用after伪类

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

       .clearfix { *zoom:1; } //为了适配ie6

       代码解释： 

      1) display:block 使生成的元素以块级元素显示,占满剩余空间; 
      2) height:0 避免生成内容破坏原有布局的高度。 
      3) visibility:hidden 使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互; 

         PS：CSS隐藏元素的几种方法

               Opacity:元素本身依然占据它自己的位置并对网页的布局起作用。它也将响应用户交互;

               Visibility:与 opacity 唯一不同的是它不会响应任何用户交互。此外，元素在读屏软件中也会被隐藏;

               Display:display 设为 none 任何对该元素直接打用户交互操作都不可能生效。此外，读屏软件也不会读到元素的内容。这种方式产生的效果就像元素完全不存在;

      4）通过 content:"."生成内容作为最后一个元素，至于content里面是点还是其他都是可以的
      5）zoom：1 触发IE hasLayout（兼容性）

      这个方法利用了after伪类通过 content 在元素的后面生成了内容为一个点的块级元素，优点是结构和语义化完全正确,代码量居中，缺点是复用方式不当会造成代码量增加。