CSS浮动解析（float）

目录

一、基础知识

1. 标签分类

1.1 块元素

1.2 行内元素

1.3 行内块元素（内联元素）

2. 标签类型转换

二、CSS 浮动原理（块元素 → 行内块元素）

三、总结

---

 

一、基础知识

 

1. 标签分类

1.1 块元素

• 独占一行；可设置宽高

• 如：div、h1-h6、p、ul li

1.2 行内元素

• 在同一行显示；不能直接设置宽高，元素的宽高就是内容撑开的宽高

• 如：span、a、strong、em

1.3 行内块元素（内联元素）

• 在同一行显示；可设置宽高

• 如：img

 

2. 标签类型转换

  2.1 块元素 → 行内元素

display:inline

  2.2 行内元素 → 块元素

display:block

  2.3 块元素、行内元素 → 行内块元素

display:inline-block

 

二、CSS 浮动原理（块元素 → 行内块元素）

 

float特点：块元素浮动后转换为行内块元素(内联元素)

根本上讲，只有块元素才能设置浮动，浮动后转换为行内块元素

行内元素、行内块元素使用float前，会先自动转换为块元素，使浮动生效（生效后再变为行内块元素）

 

示例1：内联元素 img（火狐测试）

 

示例2：行内元素 span（火狐测试）

 

三、总结