文章目录
css 中的 float 是什么
Float是一个CSS定位属性，它指定一个元素应沿其容器（块布局）的左侧left或右侧right放置，允许文本和内联元素环绕它。该元素也从网页的正常流动(文档流)中移除。
float 浮动的常用的几种值
| 值 | 作用 |
|---|---|
| float:none | 表明元素不进行浮动 |
| float:left | 表明元素必须浮动在其所在的块容器左侧 |
| float:right | 表明元素必须浮动在其所在的块容器右侧 |
| float:initial | 表明元素初始元素将设置为其默认值。 |
| float:inherit | 表明元素继承其父属性的浮动属性 |
float 作用场景
文本环绕图片
文本环绕文本
创建整个web布局
当然你还可以选择使用
flex或者grid布局实现。
在小布局中也很有用
当头像大小改变时，文本也将重新改变布局。
浮动元素是如何定位的
当一个元素浮动之后，它会被移出正常的文档流（默认的文档流形式是自上而下（块级元素）,一行接一行,每一行从左至右（行内元素）），然后
向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。浮动元素之后的元素将围绕它。浮动元素之前的元素将不会受到影响。
清除 float
元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用
clear属性。
什么情况下需要清除浮动？
有时我们需要：
- 强制元素移至任何浮动元素下方
- 需要包裹
如果浮动元素比包含元素高，它将“溢出”到其容器之外。然后我们可以添加一个clearfixhack 来解决这个问题：
如何清除浮动
使用 clear 属性，clear 浮动的常用的几种值
| 值 | 作用 |
|---|---|
| clear:none; | 元素不会向下移动清除之前的浮动 |
| clear: left; | 元素被向下移动用于清除之前的左浮动 |
| clear: right; | 元素被向下移动用于清除之前的右浮动 |
| clear: both; | 元素被向下移动用于清除之前的左右浮动 |
具体使用在示例中。