清除内部浮动的常用方法

  1. 使父元素触发形成BFC(Block Formatting Context),最常见的就是设置overflow: hidden;
  2. afeter伪元素清除浮动
        .clearfix::after {
            display: block;
            content: ".";
            clear: both;
            visibility: hidden;
            height: 0;
            line-height: 0;
        }
        
        .clearfix {
            *zoom: 1;     /*兼容IE*/
        }

    给需要清除浮动的元素添加这个样式(clearfix)即可

  3. 双伪元素清除浮动
    
        .clearfix::before,.clearfix::after {
            content: ".";
            display: table; /*触发BFC*/
        }
        .clearfix: after {
            clear: "both";
        }
        .clearfix {
            *zoom: 1;     /*兼容IE*/
        }

    同上,给需要清除浮动的元素添加这个样式(clearfix)即可

  4. 额外标签法(不推荐),在浮动元素末尾添加一个空的标签例如 <div style=”clear:both”></div>,或则其他标签br等亦可

猜你喜欢

转载自blog.csdn.net/qq_42760049/article/details/89460398
今日推荐