css 浮动详解

这是我参与8月更文挑战的第13天，活动详情查看：8月更文挑战 !

文档流

在详解浮动之前，我们先熟悉一下css中的文档流

文档流指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排列方式。并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素

标准文档流分为两类:

• 块级元素： 1).霸占一行，不能与其他任何元素并列

2).能接受宽、高

3).如果不设置宽度，那么宽度将默认变为父亲的100%，即和父亲一样宽

• 行内元素：
• 1).与其他元素并排
• 2).不能设置宽、高。默认的宽度就是文字的宽度

脱离文档流

文档一旦脱离文档流，在算其父元素的高度时，就不包括其自身了

脱离文档流的方法：

1. 浮动（float）
2. 绝对定位
3. 固定定位

浮动

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

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

特征:

1. 浮动会脱离文档流
2. 浮动可以内联排列
3. 浮动会导致父元素高度坍塌

应用:

1. 文字环绕效果
2. 浮动可以实现常规的多列布局，更适合实现自适应多列布局，比如左侧固定宽度，右侧根据父元素宽度自适应
3. 多个元素内联排列,浮动可以实现类似inline-block的排列

清除浮动

为什么要清除浮动?

因为浮动元素会脱离正常的文档流，并不会占据文档流的位置，所以如果一个父元素下面都是浮动元素，那么这个父元素就无法被浮动元素所撑开，这样一来父元素就丢失了高度，这就是所谓的浮动造成的父元素高度坍塌问题

清除浮动的方式

大致分为两类：

1. 通过触发BFC

BFC的特性之一是计算 BFC 高度的时候浮动子元素的高度也将计算在内。所以，通过触发BFC的方法可以有效清除浮动

2.通过clear属性清除浮动

在浮动的盒子之下再放一个标签或者利用伪元素 :after，在标签、伪元素中使用clear:both，来清除浮动对页面的影响