浮动属性样式

🍓浮动属性

属性名称	中文注释	备注
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，从而使得浮动盒子计算宽高