浮动属性样式
🍓浮动属性
| 属性名称 | 中文注释 | 备注 |
|---|---|---|
float | 设置盒子浮动 | left左浮动，right右浮动，none不浮动 |
clear | 清除浮动 | left清除左浮动，right清除右浮动，both左右浮动都清除（注意：clear清除浮动一般只有作用在块级元素上才能起作用） |
🍓浮动的特点
- 浮动后的盒子脱离标准流，并且可以在一行显示
- 浮动可以将一个行内元素转换为块元素
🍓清除浮动
- ⭐方法一：让因为被浮动影响的盒子自己去处理
clear: both; - ⭐方法二：在浮动盒子的同级最后加一个没有宽高的盒子，设置清除浮动
<div style="clear:both"></div> - ⭐方法三：伪元素选择器清除浮动
不成文的规定：为了防止.container::after {content: "";display: block;clear: both;width: 0;height: 0;visibility: hidden;overflow: hidden; }content内容显示出来，一般会设置以下属性：width: 0;height: 0;visibility: hidden;overflow: hidden; - ⭐方法四：
BFC清除浮动。overflow: hidden;作用于浮动盒子的父盒子，可以触发BFC，从而使得浮动盒子计算宽高