浮动属性样式

浮动属性

属性名称 中文注释 备注
float 设置盒子浮动 left左浮动,right右浮动,none不浮动
clear 清除浮动 left清除左浮动,right清除右浮动,both左右浮动都清除(注意:clear清除浮动一般只有作用在块级元素上才能起作用)

浮动的特点

  • 浮动后的盒子脱离标准流,并且可以在一行显示
  • 浮动可以将一个行内元素转换为块元素

清除浮动

  • ⭐方法一:让因为被浮动影响的盒子自己去处理clear: both;
  • ⭐方法二:在浮动盒子的同级最后加一个没有宽高的盒子,设置清除浮动
  • ⭐方法三:伪元素选择器清除浮动
    .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,从而使得浮动盒子计算宽高

你可能感兴趣的:(CSS,css)