HTML中浮动的特性,浮动元素，设置浮动（float）的元素有何特点？

浮动元素有何性质

HTML5学堂：在前端开发过程中，我们需要对元素进行浮动，而这个过程我们需要了解浮动的性质,这样方便我们快速开发，做出合理的布局。

CSS中的定位机制：普通流，浮动，绝对定位。

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

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

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

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

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

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

相关文章推荐

欢迎沟通交流~HTML5学堂