HTML中CSS清除浮动的方法总结

1.直接设置父元素的高度

优点： 简单粗暴、方便。

缺点： 有些布局中不能固定父元素高度。如：新闻列表、京东推荐模块等。

2.额外标签法

操作：

1. 在父元素内容的最后添加一个块级元素
2. 给添加的块级元素设置clear：both

缺点： 会在页面中添加额外的标签，会让页面的HTML结构变得复杂。

3.单伪元素清除法

操作： 用伪元素替代了额外标签。

基本写法：

代码语言：javascript复制

 .father::after {
            display: block;
            content: '';
            clear: both;
        }

补充写法：

代码语言：javascript复制

.clearfix::after {
            display: block;
            content: '';
            clear: both;
            /* 补充代码，在网页中看不懂伪元素 */
            height: 0;
            visibility: hidden;
        }

特点： 项目中使用，直接给标签加类即可！

4.双伪元素清除法

固定写法：

代码语言：javascript复制

.clearfix::before,
        .clearfix::after {
            content: '';
            display: table;
        }
      
        .clearfix::after {
            clear: both;
        }

特点： 项目中使用，直接给标签加类即可，after用于清除浮动，before可以解决父元素塌陷问题。

5.给父元素设置overflow:hidden

操作： 直接给父元素设置 overflow:hidden

代码语言：javascript复制

.father {
            overflow: hidden;
            width: 400px;
            background-color: pink;
        }

html hidden overflow

0 人点赞