一、Float的特性
1. 应用于文字围绕图片
2. 创建一个块级框
3. 多列浮动布局
4. 浮动元素的宽度、高度自适应，但可以设置其值。
二、核心解决的问题
文字围绕图片：img标签与多个文本标签放置在一个容器中，如果img浮动，文本标签会围绕图片。
| <img src="../img/a.jpg" style=" width: 100px; height: 200px; float: left;" alt=""> <p>001文件内容文件内容文内容文件内容<br/> 文件内容文件内容文件内容文件内容文件内内容文件内容<br/> 文件内容文件内容文件内容文件内容文件内容<br/> 文件内容文件内容文件内容文件内容文内容文件内容文件内容<br/> <p>p标签文件内容文件内容文件内容文件内容文件内容文容文件内容文件内容文件内容</p> <div>Div标签文件内容文件内容文件内容文件内容文件内容文件内容</div> 文件内容文件内容文件内容文件件内容文件内容文件内容<br/> 文件内容文件内容文件内容文件内容文件内容文件内容文件内容文件内容<br/> 文件内容文件内容文件内容文件内容文件内容文件内内容文件内容<br/> 文件内容文件内容文件内容文件容文件内容文件内容<br/> 文件内容文件内容文件内容文件容文件内容文件内容<br/> </p> |
2.1 这是一个问题
浮动元素与正常元素相邻，且浮动元素与正常元素之间没有清除浮动，此时正常元素会被浮动元素盖住，但包含的内容会围绕浮动元素显示。
| <div style="width: 100px; height: 200px; background: red;float: left;" >001</div> <div style="width: 100px; height: 200px; background: gray;float: none;" ><p>002</p></div> |
001浮动，002没有浮动，但002元素本身被001盖住，但内容却围绕001显示。
三、非核心且主要应用领域
分栏布局：让区块先水平排列，然后超出部分另起一行。
主要特点
1.父级高度塌陷（这也是一个严重的问题）
