html浮动

浮动的代码

属性名:float

属性值	效果
left	左浮动
right	右浮动

浮动的特点

1. 浮动元素会脱离标准流（简称：脱标），在标准流中不占位置 • 相当于从地面飘到了空中

2. 浮动元素比标准流高半个级别，可以覆盖标准流中的元素

3. 浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动

4. 浮动元素会受到上面元素边界的影响

5. 浮动元素有特殊的显示效果

        • 一行可以显示多个

        • 可以设置宽高

注意点： • 浮动的元素不能通过text-align:center或者margin:0 auto，让浮动元素本身水平居中

清除浮动(清除浮动带来的影响)

1.单伪元素清除法

clearfix::after {
        content: "";
        display: block;
        clear: both;
        height: 0;
        line-height: 0;
        visibility: hidden;
      }

2.双伪元素清除法
.clearfix::before,
      .clearfix::after {
        content: "";
        display: table;
      }
      .clearfix::after {
        clear: both;
      }

双伪元素清除法同时可解决塌陷问题