web前端面试常见问题三------浮动原理和清除浮动

web前端面试常见问题三

                                                     ------浮动原理和清除浮动

            面试的时候浮动也是面试官经常问面试者的基础问题之一，浮动（float）也是大家平常在网页开发中经常使用的属性，（主要是为了让一些标签并排显示）。

             下面我先讲一下浮动的原理：浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。浮动框不属于文档中的普通流（文档流），即脱离了文档流，当一个元素浮动之后，不会影响到 块级框的布局而只会影响内联框（通常是文本）的排列，文档中的普通流就会表现得和浮动框不存在一样，当浮动框高度超出包含框的时候，也就会出现包含框不会 自动伸高来闭合浮动元素（“高度塌陷”现象）。顾名思义，就是漂浮于普通流之上，像浮云一样，但是只能左右浮动。正是因为浮动的这种特性，导致本属于普通流中的元素浮动之后，包含框内部由于不存在其他普通流元素了，也就表现出高度为0（高度塌陷）。在实际布局中，往往这并不是我们所希望的，所以需要闭合浮动元素，使其包含框表现出正常的高度。  

           再来看看w3c对浮动的一些基本定义：

定义和用法

float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。

如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。

注释：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。

默认值：	none
继承性：	no
版本：	CSS1
JavaScript 语法：	object.style.cssFloat="left"

可能的值

值	描述
left	元素向左浮动。
right	元素向右浮动。
none	默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit	规定应该从父元素继承 float 属性的值。

               浮动的缺陷在上面已经说了，主要是存在高度塌陷问题，接下来我就要讲如何清除浮动

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

                2.通过在浮动元素的末尾添加一个空元素，设置 clear：both属性，after伪元素其实也是通过 content 在元素的后面生成了内容为一个点的块级元素；具体看如下代码：

这种方法代优点是码量少，而且易懂，缺点是多了个没有任何语义的空标签，不利于后期维护

.clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; } 
.clearfix { *zoom:1; } //为了适配ie6

1) display:block 使生成的元素以块级元素显示,占满剩余空间;
2) height:0 避免生成内容破坏原有布局的高度。
3) visibility:hidden 使生成的内容不可见，并允许可能被生成内容盖住的内容可以进行点击和交互;
4）通过 content:"."生成内容作为最后一个元素，至于content里面是点还是其他都是可以的，例如oocss里面就有经典的 content:"XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",有些版本可能content 里面内容为空,一丝冰凉是不推荐这样做的,firefox直到7.0 content:”" 仍然会产生额外的空隙；
5）zoom：1 触发IE hasLayout。

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

我个人建议使用最后一种使用伪类的方法，这个也是目前各大公司普遍使用的清除浮动的方法。大家可以把这个clearfix类写到自己的css reset 中就可以重复使用啦。~\(≧▽≦)/~啦啦啦