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;
        }

给TA打赏
共{{data.count}}人
人已打赏
知识碎片

结构伪类选择器的分类以及使用语法

2021-11-24 22:15:33

知识碎片

BFC简单介绍

2021-11-25 12:49:27

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧