浮动

1.标准文档流

定义：内容是从上往下，从左到右书写的。前面的内容或者位置发生变化时，后面的内容也会随之变化。

HTML就是一个标签的文档流，网页上内容的位置，与书写顺序有关。

元素的分类

标准文档流将HTML元素分为三种：

1. 行内元素 inline
2. 块级元素 block
3. 行内块元素 inline-block

区别

行内元素：

• 与其他行内元素并排
• 不能设置宽高。默认的宽、高就是内容的宽高。

块级元素：

• 块级元素独占一行。
• 可以设置宽高。默认的宽为100%，默认的高为内容的高。

常见的标签分类

块级元素有

p,h1-h6,ul,li,ol,dl,dt,dd，div

行内元素有

a,b,i,em,strong,span，img

行内元素与块级元素的转换

我们可以通过改变

display

的值来改变元素的类型。

块级元素转行内元素（了解）

display：inline;

行内元素转块级元素(重点)

display:block;

转行内块元素（重点）

display：inline-block；

行内块元素的特点

• 可以设置宽高，如果不设置，默认为内容的宽高。
• 可以与其他行内元素或者行内块元素在一排显示。

按显示分类（了解）

**

input 、img 、textarea这些标签都是行内元素，但是却可以设置宽高

**。

替换元素（非重点)

替换元素就是浏览器会根据元素的属性，来决定元素的具体显示内容。

非替换元素（非重点)

非替换元素不是通过标签的属性来决定元素的内容的，而是由标签中的标签体决定的。

2.脱离标准文档流（脱标）

脱离标准文档流的三种方式：

1. 浮动
2. 绝对定位
3. 固定定位

3.浮动

特性1 ：脱离标准文档流

1. 可以与其他元素并排展示
2. 也可以设置宽高
3. 元素如果不设置宽高，默认为内容的宽高。

特性2 浮动的元素互相贴靠

浮动元素会努力贴靠上一个浮动元素的边。如果宽度不够，则当前浮动元素会换行显示。换行后顶部不会超过上一个浮动元素的底部。

特性3 浮动的元素有字围效果

标准流的文字不会被浮动的盒子遮挡，而是会像水一样将浮动的盒子包围起来。

浮动与行内块的区别

1.多个行内块并排展示时会有间隙

原因：HTML代码中行内块前后有空格，换行或者缩进。

解决办法：

1. 消除两个行内块之间的空格（不推荐，因为会影响代码的可读性。）
2. 给父元素设置font-size：0px;（font属性可以被继承，所以子元素要单独设置一下font-size）

2.多个行内块若其中一个有内容，别的没有内容，则有内容的会掉下来。

原因：行内元素对齐的方式为基线对齐，有内容的会以内容的基线作为盒子的基线，没有内容的以盒子的底为基线对齐。

解决办法：

1. 都添加内容

2. 修改行内元素的对齐方式

vertical-align: top;