web前端面试常见问题三
------浮动原理和清除浮动
面试的时候浮动也是面试官经常问面试者的基础问题之一,浮动(float)也是大家平常在网页开发中经常使用的属性,(主要是为了让一些标签并排显示)。
下面我先讲一下浮动的原理:浮动的框可以左右移动,直至它的外边缘遇到包含框或者另一个浮动框的边缘。浮动框不属于文档中的普通流(文档流),即脱离了文档流,当一个元素浮动之后,不会影响到 块级框的布局而只会影响内联框(通常是文本)的排列,文档中的普通流就会表现得和浮动框不存在一样,当浮动框高度超出包含框的时候,也就会出现包含框不会 自动伸高来闭合浮动元素(“高度塌陷”现象)。顾名思义,就是漂浮于普通流之上,像浮云一样,但是只能左右浮动。正是因为浮动的这种特性,导致本属于普通流中的元素浮动之后,包含框内部由于不存在其他普通流元素了,也就表现出高度为0(高度塌陷)。在实际布局中,往往这并不是我们所希望的,所以需要闭合浮动元素,使其包含框表现出正常的高度。
再来看看w3c对浮动的一些基本定义:
定义和用法