css 浮动

1. 浮动

   浮动是css的布局功能，在CSS中，包括div在内的任何元素都可以浮动的方式显示。它能够改变页面中对象的前后流动顺序。浮动元素会脱离文档流，不占据空间。浮动元素可以左右移动，直到碰到包含它的边框或者浮动元素的边框停留。

 

2. 浮动可能带来的问题

   父元素的高度无法撑开，影响与父元素同级的元素；与浮动元素同级的非浮动元素会紧跟其后，可能导致看不到非浮动元素的情况；浮动元素可能会影响到页面的整理布局效果

 

3. 清除浮动影响的方法

  （1）使用空标签清除浮动

      在所有浮动标签后面添加一个空标签，样式设置为clear：both；，如<div style="clear:both;"></div>此方法增加了无意义的标签，与HTML5语义化标签相违背。

 

 （2）使用overflow或者display：table

         给包含浮动元素的父标签添加css属性 overflow:auto/overflow:hidden; zoom:1;使用该属性来闭合浮动，触发BFC/haslayout。使用 zoom:1 兼容IE6，大多数情况下它能在不影响现有环境的条件下激发元素的 haslayout。display:table 本身并不会创建BFC，但是它会产生匿名框(anonymous boxes)，而匿名框中的display:table-cell可以创建新的BFC。

 

 （3）将父元素也设置为浮动

       float:left/float:right 将父元素也设置为浮动就可以包含浮动内容；

 

 （4）使用伪元素:after

        其中必须为需要清除浮动元素的伪对象中设置 height:0，否则该元素会比实际高出若干像素;.clearfix:after{display:block;clear:both;content:”";visibility:hidden;height:0;} .clearfix{zoom:1;}

      其中display:block 使生成的元素以块级元素显示,占满剩余空间;clear：both用来闭合浮动的；通过 content:" "生成内容作为最后一个元素，至于content里面是空还是点还是其他都是可以的；

visibility:hidden 使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互; height:0 ；避免生成内容破坏原有布局的高度；zoom：1 触发IE hasLayout。除了clear：both用来闭合浮动的，其他代码都是为了隐藏掉content生成的内容，也有使用font-size：0，line-height：0来隐藏内容的。