浮动样式

文档流（normal flow）

首先理解浮动需要了解文档流。
网页是多层结构，一层叠着一层的，通过CSS可以控制每层的样式，而用户只能只看最上一层，底下无论有多少层都会被前面的那一层遮盖，而造成用户无法看见。
而最底下的一被称为文档流，创建的文档默认即是文档流中排列。

元素的两种状态

在文档流
不在文档流（脱离文档流）

元素在文档中有什么特点

1. 块元素
   块元素独占一行，从上往下垂直排列
   默认宽度是低级的100%
   默认高度由内容撑开
2. 行内元素
   不独占一行，在页面中自左向事排列
   如果一行排列不下，则元素会换到第二行去展示
   默认高度是由内容撑开

浮动样式

浮动是为了图片能被文字环绕而出现的特性

1. img浮动元素
2. p 块级元素代表（感觉不到浮动元素）
3. 文字 inline/inline-block（感受不到浮动元素）

素有高低顺序，浏览器渲染从高到低的渲染,后写的层级比先写的高
背景层最低层级=》块级元素层级=》浮动层（块元素感受不到）=inline/inline-block

文本元素和块级元素天然排斥，不会重合。文本元素不会跑到浮动元素的下面，而块级是会跑到浮动元素的下面去。

浮动元素--float

可选参数：

none 默认值 元素不浮动
left 向左浮动
right 向右浮动

浮动元素的特性

1. 文本环绕
2. 多个盒子浮动会从左往右依次排列，如果当前排列不下，会“换行排列”
3. 高度塌陷（大盒子如果不设置高度，内部所有元素浮动，他会高度塌陷，撑不开盒子）
   解决办法：
   1.父元素设定高度
   2.bfc 块级格式化上下文
   3.清除浮动解决高度塌陷
4. 块级化 浮动会将元素强行转换为块元素
   具有块元素所有性质，不具有独占一行和默认宽度父级100%的特性，而是由里面的元素撑开（此参考行内块元素特性 ）
5. 换行方式
   原地向下缩到空间往前
   开发尽量保证浮动元素等高

浮动的优点

1.没有解析空格，不存在垂直对齐的毛病（inline-block的毛病）
2.完美解析margin 没有垂直外边距合并问题

浮动元素不能margin:0 auto水平居中

清除浮动

不挨着浮动元素，遇到浮动元素之后换行，清除浮动元素对当前元素产生的影响。
可选值
clear:left; 清除左侧浮动元素对当前元素的影响
clear:right;清除右侧浮动元素对当前元素的影响
clear:both;有左浮动清除左浮动，有右浮动清除右浮动,两侧都有清除影响最大的那个

原理

设置清除浮动之后，游览器会自动会为元素添加一个上外边距，以使其位置不受其他浮动元素影响

有没有元素既可能是左浮动又是右浮动？ 没有