CSS清除浮动（float）的三种方式

最新推荐文章于 2024-09-10 16:53:37 发布

羽行

最新推荐文章于 2024-09-10 16:53:37 发布

阅读量7.3k

点赞数 8

分类专栏：笔记文章标签： css css3 javascript

本文链接：https://blog.csdn.net/YuHang6686/article/details/123172695

版权

浮动清除浮动挡板元素 overflow:hidden 伪元素

关键词由CSDN通过智能技术生成

笔记专栏收录该内容

6 篇文章 0 订阅

订阅专栏

标题CSS清除浮动（float）的三种方式

为什么要清除浮动？
浮动的原理是让图片脱离文档流，直接浮在画面上。我们一般布局都是只设置宽度不设置高度，让内容来填充高度。但利用浮动后会让原本填充的高度消失，父元素高度为0，后续添加内容布局机会混乱。这时候就可以利用清除浮动来解决父元素高度塌陷的问题。
1.添加挡板元素

<style>
        .father{
            border: 1px solid red;
            width: 900px;
        }
        .son1,.son2{
            width: 300px;
            height: 300px;
            float: left;
        }
        .son1{
            border: 1px solid darkcyan;
        }
        .son2{
            border: 1px solid skyblue;
            
        }
        .baffle{
            clear: both;
            zoom: 1;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son1">内容1</div>
        <div class="son2">内容2</div>
        <div class="baffle">挡板元素</div>
    </div>
</body>

添加baffle（挡板）之前
在这里插入图片描述
添加baffle（挡板）之后

在这里插入图片描述
2.给父元素添加overflow: hidden;
这总是最快最方便的清除方式，但overflow: hidden还有另一个效果，溢出隐藏，当你元素的高度或者宽度大于父级高度或者宽度的时候，溢出的部分将会被隐藏

原本图片大小
在这里插入图片描述
给父元素添加overflow：hidden之后

图片的大小被父元素的高度和宽度束缚，这种情况常见与绝对定位和相对定位
3.万能清除
有点繁琐，但效果极好，不会溢出隐藏，且添加方式和第一种相似。

.father::after{
            content: "";
            height: 0;
            display: block;
            clear: both;
            zoom: 1;
        }

第一种方法比较一般，第二种方法最常用，第三种方式是为了清除第二种方法的影响下来清除浮动

8说了，就是细节。
在这里插入图片描述

羽行

关注

8
点赞
踩
46

收藏

觉得还不错? 一键收藏
1
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录