float浮动基础

浮动 float

由来:

为实现文本环绕效果而产生,后用于快级元素横向并排布局
(优于display:inline-block;)

格式:

1. 标注文档流排布:依次从上至下默认排布.
2. 给盒元素设置float–脱标:脱离标准文档流.
3. 浮动元素不存在解析空格默认顶端对齐.

代码:

float:left;(从左往右排布)
float:right(从右往左排布)
浮动元素无法通过float居中.

特性:

1. 浮动元素会托起盒内内容.
2. 浮动的元素父级不设置宽度,内元素会往下掉.特性:
3. 文本环绕
4. 浮动的高度塌陷
5. 块级化:将元素强行转化为块级元素而是由里面的元素撑开的，这是浮动的包裹性
6. 换行方式:
7. 有多个浮动元素的情况下，多个盒子浮动，会从左往右依次排列，如果当前行排不下，会换行排列.
8. 它具有块元素的所有性质，但是不具有独占一行和父元素宽度100%的特性
   从第一个元素开始进行浮动排列，依次水平浮动，直到最后一个元素
9. 如果当前行排不下，会原地向下缩直到可以有空间可以浮动排列，不会再往上走了

浮动样式的重点:

1. 浮动的元素不会覆盖彼此
2. 具有和文本环绕相同的特性,一个浮动元素后面的行内元素首先按照文本环绕效果进行排列.

行内元素浮动样式的设置:

1. 图片脱离标准文档流
2. 默认顶端对齐