CSS清除浮动的八种方法

简介: CSS清除浮动的八种方法

我们为什么需要清除浮动,如果我们不清除浮动会发生什么呢?

基础样式,没清除浮动之前代码:

可复制也可以自己手动布局,后可尝试使用下面介绍的方法练习清除浮动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>不清除浮动会发生什么</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        .father {
            width: 400px;
            background-color: red;
        }
        .son {
            width: 150px;
            height: 150px;
            float: left;
            background-color: pink;
        }
        .box {
            width: 200px;
            height: 200px;
            background-color: orange;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son">我是浮动后的子元素1</div>
        <div class="son">我是浮动后的子元素1</div>
    </div>
    <div class="box">我是下一个兄弟元素box</div>
</body>
</html>

未清除浮动之前的效果图:

如图所示:不清除浮动会影响布局,因为我们没有给父级高度,跟父级同级的元素会受到影响,因为给子元素添加浮动,浮动之后,子元素会脱离文档流,父级的下一个兄弟元素就会顶上去,浮动可以设置文字围绕

清除浮动后的效果:

让我为大家介绍八种清除浮动的方法吧!本人文笔有限,如有不对的地方可以向我提出,感谢大家!

一、给父级div定义伪类(推荐使用)

这个是清除浮动常用的方法

复制可用

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

切记给浮动的父元素添加

二、clear:both

在浮动尾部添加空div标签,添加上样式clear:both;

.son1 {
  clear:both;
}

三、overflow:hidden

给父级div定义overflow:hidden

overflow:hidden;

四、给父级固定的高度height

注意:不适合用在不确定高度的元素上,比如某宝,一直向下滑,会一直刷新出新的商品

五、父级随子级一起浮动

这种方法还是会影响接下来的布局,不过可以解决父级的问题

六、overflow:auto

给浮动元素父级添加overflow:auto;

七、display:table

给浮动元素的父级div定义为表格display:table

八、br标签

br中有clear属性,添加all可以清除浮动

清除浮动代码大总结,复制可玩:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>清除浮动的八种方法</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        /* 第一种,给父级div定义伪类,父级没设置高度时 */
        /* 记得给浮动元素的父级添加clearfix类名 */
        /* .clearfix::after {
            display: block;
            content: "";
            height: 0;
            overflow: hidden;
            clear: both;
        }
        .clearfix {
            zoom: 1;
        } */
        .father {
            /* 第三种方法给浮动元素父级添加overflow:hidden */
            /* overflow: hidden; */
            /* 第四种方法给父级添加高度 */
            /* height: 150px; */
            /* 第五种方法父级随子级一起浮动 */
            /* float: left; */
            /* 第六种方法给父级添加overflow:auto */
            /* overflow: auto; */
            /* 第七种方法给父级添加display:table */
            /* display: table; */
            width: 400px;
            background-color: red;
        }
        .son {
            width: 150px;
            height: 150px;
            float: left;
            background-color: pink;
        }
        .box {
            width: 200px;
            height: 200px;
            background-color: orange;
        }
        /* 第二种方法 */
        /* .son1 {
            clear: both;
        } */
    </style>
</head>
<body>
    <!-- 第一种方法的给父级添加clearfix -->
    <div class="father"> 
        <div class="son">我是浮动后的子元素1</div>
        <div class="son">我是浮动后的子元素2</div>
        <!-- 第二种方法clear:both; -->
        <!-- <div class="son1"></div> -->
        <!-- 第八种方法 -->
        <!-- <br clear="all"/> -->
    </div>
    <div class="box">我是下一个兄弟元素box</div>
</body>
</html>

感谢大家的阅读,如有不对的地方,可以向我提出,感谢大家!

相关文章
|
4天前
|
JavaScript 前端开发
【快捷键配置】常用HTML类名、CSS样式名称、JS方法变量名、vue代码片段
【快捷键配置】常用HTML类名、CSS样式名称、JS方法变量名、vue代码片段
|
4天前
|
前端开发
CSS水平居中与垂直居中的方法
CSS水平居中与垂直居中的方法
|
4天前
|
前端开发
CSS画三角形(三种方法)
CSS画三角形(三种方法)
|
4天前
|
前端开发 计算机视觉 开发者
利用CSS改变图片颜色的100种方法!
利用CSS改变图片颜色的100种方法!
46 1
|
3天前
|
前端开发
CSS清除浮动:让页面布局更上一层楼
CSS清除浮动:让页面布局更上一层楼
|
4天前
|
前端开发
【专栏】在 create-react-app 中集成 less/sass 预处理器和 react-css-modules 的方法
【4月更文挑战第29天】本文介绍了在 create-react-app 中集成 less/sass 预处理器和 react-css-modules 的方法。首先,通过 `npm` 安装 less 或 sass 依赖,然后修改 `config-overrides.js` 配置文件以支持 less/sass 编译。接着,详细阐述如何使用 less/sass 编写样式。再者,安装 react-css-modules 并配置 webpack,使能样式模块化。最后,展示了如何结合使用 less/sass 和 react-css-modules,以提升前端开发的效率和代码质量。
|
4天前
|
前端开发
css中几种隐藏元素的方法
css中几种隐藏元素的方法
12 0
|
4天前
|
JavaScript 前端开发 iOS开发
js实用方法记录-动态加载css/js
js实用方法记录-动态加载css/js
21 0
|
4天前
|
前端开发
css声明方法
【4月更文挑战第14天】css声明方法
19 6
|
4天前
|
Web App开发 前端开发 开发者
css检查方法
【4月更文挑战第13天】css检查方法
18 2