CSS清除浮动的三种方式

最新推荐文章于 2022-11-23 20:02:54 发布

lhttq

最新推荐文章于 2022-11-23 20:02:54 发布

阅读量193

点赞数

分类专栏：前端文章标签： css3 css

本文链接：https://blog.csdn.net/lhttq/article/details/107897948

版权

前端专栏收录该内容

10 篇文章 1 订阅

订阅专栏

CSS清除浮动

添加新元素并使用 clear:both;
给父元素添加overflow:auto;
给父元素使用伪类和zoom属性

看下面例子

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ajax</title>
    <style>
        .a1 {
            width: 900px;
            border: 1px solid #ccc;
        }
        
        .a2 {
            width: 300px;
            height: 200px;
            background-color: beige;
            float: left;
        }
        
        .a3 {
            width: 400px;
            height: 300px;
            background-color: aqua;
            float: left;
        }
    </style>
</head>

<body>
    <div class="a1">
        <div class="a2"></div>
        <div class="a3"></div>
        <div class="a4"></div>
    </div>

</body>

</html>

基础样式
没有清除浮动的效果
第一种方式：给第四个div添加clear:both

   .a4 {
            clear: both;
        }

效果图（第一个div的高度被撑开了）
在这里插入图片描述
第二种方式：给父元素添加overflow:auto

.a1 {
            width: 900px;
            border: 1px solid #ccc;
            overflow: auto;
        }

在这里插入图片描述
第三种方式:使用伪类

 .a1 {
            width: 900px;
            border: 1px solid #ccc;
            zoom: 1;
        }
        .a1:after {
            display: block;
            clear: both;
            content: "";
        }

效果图
在这里插入图片描述

lhttq

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
CSS清除浮动的三种方式

CSS清除浮动添加新元素并使用 clear:both;给父元素添加overflow:auto;给父元素使用伪类和zoom属性看下面例子<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <t
复制链接

扫一扫

专栏目录