51工具盒子

依楼听风雨
笑看云卷云舒,淡观潮起潮落

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

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

优点: 简单粗暴、方便。

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

2.额外标签法

操作:

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

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

3.单伪元素清除法

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

基本写法:

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

补充写法:

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

特点: 项目中使用,直接给标签加类即可!

4.双伪元素清除法

固定写法:

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

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

5.给父元素设置overflow:hidden

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

.father {
            overflow: hidden;
            width: 400px;
            background-color: pink;
        }
赞(1)
未经允许不得转载:工具盒子 » HTML中CSS清除浮动的方法总结