float浮动

文档流

 文档流是文档中可显示对象在排列时所占用的位置

（块标签在文档流中的默认排列方式是从上到下，内联标签在文档流中的默认排列方式是从左到右）

float特性

 加浮动的元素，会脱离文档流，会延迟父容器靠左或靠右排列，如果之前已经有浮动的元素，会挨着浮动的元素进行排列。

float取值

right
left
none（默认值：不具备 浮动）

这个是两个盒子box1和box2:


然后我们给它的box1添加一个左浮动：

它就会变成下面这个样子：
这个box1，也就是这个黄色的方块浮在了红色方块的上面，它已经脱离了原来的文档流，而红色的方块掉了下去，所以它就靠左了。

那如果我把这个box1改为右浮动，它就会变成下面这个样子：
黄色的方块就会浮到右边。

那如果我给这个box2也添加一个左浮动，那么这个红色的方块也会沿着父容器靠左，但是左边已经有黄色方块了，这时候它就会挨着黄色的方块靠右进行排列。

float的注意事项

• 只会影响后面的元素
• 内容默认提升半层
• 默认宽根据内容决定
• 换行排列
• 主要给块元素添加来实现布局，也可以给内联元素添加（但是很少用到）

就比如下面这张图片，我们是给红色的方块加了一个左浮动，让它浮在了上面，然后再给蓝色方块里加入文字，发现文字并没有被红色方块所覆盖，因为这个文字的层级要高于蓝色方块，所以它被挡到了外面。

这样的一个现象可以做一些图文混排的效果，红色区域可以做一个图片，然后文字区域可以做一些图片的描述

这个就是当浮动的元素在父容器中排列不下的情况下，它就会自动折行，会排到下面。

由于浮动会影响到后面元素的布局，而有的时候我们不希望下面的元素受到影响，所以我们要考虑清除浮动：

如何清除浮动？

上下排列：clear属性，表示清除浮动的 left、right、both
嵌套排列：
固定宽高：不推荐，不能把高度固定死，不适合做自适应的效果。
父元素浮动：不推荐，因为父容器浮动也会影响到后面的元素
overflow：hidden（BFC规范），如果有子元素想溢出，那么会受到影响。
display：inline-block（BFC规范），不推荐，父容器会影响到后面的元素。
设置空标签：不推荐，会多添加一个标签。
after伪类：推荐，是空标签的加强版，目前各大公司的做法。
（clear属性指挥操控块标签，对内联标签不起作用）