清浮动 | 为何要清除浮动（闭合浮动）

HTML5学堂：在文档中存在几种不同的元素表现形式，一种是正常状态，还有两种是设置浮动或者定位的状态。浮动之后的元素，通常我们需要“闭合浮动”，那么闭合浮动的意义何在呢？作为定位又是否脱离了文档流呢？

CSS中的定位机制

普通流，浮动，定位。

普通流

普通流 （normal flow)，或者称之为常规流。也是我们通常称呼的“文档流”。

浮动

浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘。浮动框不属于文档中的普通流，当一个元素浮动之后，不会影响到块级框的布局，只会影响内联框（通常是文本）的排列，文档中的普通流就会表现得和浮动框不存在一样。

当浮动框高度超出包含框的时候，也就会出现包含框不会自动伸高来闭合浮动元素（“高度塌陷”现象）。顾名思义，就是漂浮于普通流之上，像浮云一样，但是只能左右浮动。

正是因为浮动的这种特性，导致本属于普通流中的元素浮动之后，包含框内部由于不存在其他普通流元素了，也就表现出高度为0（高度塌陷）。在实际布局中，往往这并不是我们所希望的，所以需要闭合浮动元素，使其包含框表现出正常的高度。

定位

绝对定位（absolute）:脱离普通流，使用left，right，top， bottom等属性相对于其最接近的一个最有定位设置的父级对象进行绝对定位，如果对象的父级没有设置定位属性，即还是遵循HTML定位规则的，则依据 body 对象左上角作为参考进行定位。可以层叠默认是要比普通流 和浮动元素z-index高。

相对定位（relative）：对象不可层叠，依据left，right，top，bottom等属性在正常文档流中偏移自身位置。同样可以用z-index分层设计。但是不会脱离普通流相对定位一个最大特点是：自己通过定位跑开了还占用着原来的位置，不会让给他周围的诸如文本流之类的对象。

相关文章推荐

浮动元素的基本特性

如何清除浮动

br清浮动的原理与clear:both的兼容

position 定位的基本知识

欢迎沟通交流~HTML5学堂