清楚浮动

最新推荐文章于 2022-04-01 12:05:13 发布

尘寰ya

最新推荐文章于 2022-04-01 12:05:13 发布

阅读量152

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/qq_44165941/article/details/109691854

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文介绍了清除浮动的四种常见CSS技巧：1) 使用额外标签法，通过添加空div或br标签；2) 父级添加overflow:hidden;触发BFC；3) 利用伪元素`:after`，适用于百度、淘宝、网易等网站；4) 使用`:before`和`:after`结合，如小米和腾讯的代码实现。这些方法有助于解决浮动元素引起的布局问题。

摘要由CSDN通过智能技术生成

1.额外标签法

＜div style="clear:both;">＜/div>
//或者下面
＜br style="clear:both;" />

2.父级添加overflow:hidden;，触发BFC的方式实现清除浮动效果

3.:after 案例：百度淘宝网网易

 .clearfix::after{
            content: ".";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
        .clearfix{
            *zoom: 1;
        }

4.before和after 案例：小米腾讯代码更简洁

  .clearfix::after,.clearfix:before {
            content: ".";
            display: table;/* 这句话可以触发BFC */
        }

        .clearfix::after {
            clear: both;
        }

        .clearfix {
            *zoom: 1;
        }