flaot
属性
- none（默认）
- left（元素立即脱离文档流，向页面左侧浮动）
- right（元素立即脱离文档流，向页面右侧浮动）
特性
- 元素浮动以后，浮动里就会提升层级，分别储存盒模型相关内容、文字相关内容；需要注意⚠️的是，只是盒模型相关被提升，文字相关并不会提升；（所以可以理解为浮动只会提升半个层级）
我们可以通过此特性来设置环绕图片的效果。
元素浮动以后，元素会立即脱离文档流，它下面的元素会立即向上移动
元素浮动以后，会尽量向页面的左上或右上漂浮，直到遇到父元素边框或其他的浮动元素才会停止。
如果浮动元素上面是一个没有浮动的块元素，则浮动元素不会超过块元素
浮动的元素不会超过它上面的兄弟元素，最多一边齐
-
在文档流中，子元素的宽度默认占父元素的全部
1.当块元素设置浮动以后，会完全脱离正常流，会变成行内块元素，宽高会被内容撑开
2.当内联元素设置浮动以后，会完全脱离正常流，会变成块元素，宽高会被内容撑开，根据此特性可以定义元素的宽高
块元素与内联元素设置浮动后效果图
使用场景
两栏布局：侧栏固定宽度 内容区自适应宽度
实现：margin-left ，float
三栏布局：两侧栏固定宽度 中间内容区自适应宽度
实现：margin-left/right ，float
浮动的副作用
- 对后续元素位置产生影响，父容器高度计算出现问题
- 产生原因：在常规流中，父元素默认被子元素撑开，但是设置浮动以后子元素会完全脱离文档流，此时无法撑起父元素的高度，导致父元素塌陷，父元素下的所有元素向上移动，导致页面混乱
清除浮动
属性：
left（清除左侧）
right （清除右侧）
both（清除对他影响最大的元素）
none（默认不清除）
inherit
解决副作用：
1.给包含浮动元素对容器设置 class="clearfix"
.clearfix::after {
content:' ';
display:both;
clear:both;
}