清除浮动的七种方式方法（实例代码讲解）

最新推荐文章于 2022-09-08 14:56:54 发布
最新推荐文章于 2022-09-08 14:56:54 发布
阅读量568 收藏
点赞数
分类专栏： Web前端 清除浮动 文章标签： 清除浮动

这里写图片描述
实例代码（未清除浮动）：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>清除浮动方法大全</title>
<link rel="stylesheet" href="reset.css">
<style>
.main div {
float: left;
width: 200px;
height: 200px;
margin-right: 20px;
background: #fcf;
}
.footer {
width: 420px;
height: 100px;
background: red;
}
</style>
</head>
<body>
<div class="wrap">
<div class="main">
<div>清除浮动方法大全</div>
<div>html学习</div>
</div>
<div class="footer"></div>
</div>
</body>
</html>

解析：页面开发的时候可以为父级标签添加固定高度，但是有时希望内容能够撑开高度（比如内容不固定的时候）。对于不浮动的元素来说，它们是能够撑开外部div的高度的，但是一旦浮动，元素脱离文档流，父级div就相当于没有了内容（上面的例子中类名为main的高度为0了）。这时是没有办法实现内容撑开高度的。此时需要进行清除浮动对布局造成的一系列影响，所以叫清浮动。（不要误解成把浮动清除了，元素就没有浮动了，不是同一概念）。
下面E良师益友网就为大家分析总结一下清除浮动的方法！

一：空标签清浮动

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>清除浮动方法大全</title>
<link rel="stylesheet" href="reset.css">
<style>
.main div {
float: left;
width: 200px;
height: 200px;
margin-right: 20px;
background: #fcf;
}
.footer {
width: 420px;
height: 100px;
background: red;
}
.clear {
clear: both;
                        /*消除默认行高的影响*/
height: 0;
}
</style>
</head>
<body>
<div class="wrap">
<div class="main">
<div>清除浮动方法大全</div>
<div>html学习</div>
<p class="clear"></p>
</div>
<div class="footer"></div>
</div>
</body>
</html>

注释：上面用p标签进行空标签清浮动，当然可以用别的标签；如果用行元素的话需要进行转化为块，块元素就没有必要转化啦。

二：br标签清除浮动

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>清除浮动方法大全</title>
<link rel="stylesheet" href="reset.css">
<style>
.main div {
float: left;
width: 200px;
height: 200px;
margin-right: 20px;
background: #fcf;
}
.footer {
width: 420px;
height: 100px;
background: red;
}
</style>
</head>
<body>
<div class="wrap">
<div class="main">
<div>清除浮动方法大全</div>
<div>html学习</div>
<!-- br标签自带的属性 -->
<br clear="all" />
</div>
<div class="footer"></div>
</div>
</body>
</html>

三：父元素设置overflow：hidden

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>清除浮动方法大全</title>
<link rel="stylesheet" href="reset.css">
<style>
.main {
overflow: hidden;
}
.main div {
float: left;
width: 200px;
height: 200px;
margin-right: 20px;
background: #fcf;
}
.footer {
width: 420px;
height: 100px;
background: red;
}
</style>
</head>
<body>
<div class="wrap">
<div class="main">
<div>清除浮动方法大全</div>
<div>html学习</div>
</div>
<div class="footer"></div>
</div>
</body>
</html>

四：父元素设置overflow：auto

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>清除浮动方法大全</title>
<link rel="stylesheet" href="reset.css">
<style>
.main {
overflow: auto;
}
.main div {
float: left;
width: 200px;
height: 200px;
margin-right: 20px;
background: #fcf;
}
.footer {
width: 420px;
height: 100px;
background: red;
}
</style>
</head>
<body>
<div class="wrap">
<div class="main">
<div>清除浮动方法大全</div>
<div>html学习</div>
</div>
<div class="footer"></div>
</div>
</body>
</html>

五：父元素浮动

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>清除浮动方法大全</title>
<link rel="stylesheet" href="reset.css">
<style>
.main {
float: left;
}
.main div {
float: left;
width: 200px;
height: 200px;
margin-right: 20px;
background: #fcf;
}
.footer {
width: 420px;
height: 100px;
background: red;
}
</style>
</head>
<body>
<div class="wrap">
<div class="main">
<div>清除浮动方法大全</div>
<div>html学习</div>
</div>
<div class="footer"></div>
</div>
</body>
</html>

注释：使得与父元素相邻的元素的布局会受到影响（影响到了类名为footer的元素）。

六：父元素设置display：table

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>清除浮动方法大全</title>
<link rel="stylesheet" href="reset.css">
<style>
.main {
display: table;
}
.main div {
float: left;
width: 200px;
height: 200px;
margin-right: 20px;
background: #fcf;
}
.footer {
width: 420px;
height: 100px;
background: red;
}
</style>
</head>
<body>
<div class="wrap">
<div class="main">
<div>清除浮动方法大全</div>
<div>html学习</div>
</div>
<div class="footer"></div>
</div>
</body>
</html>

七：after 伪元素（不是伪类）

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>清除浮动方法大全</title>
<link rel="stylesheet" href="reset.css">
<style>
.main div {
float: left;
width: 200px;
height: 200px;
margin-right: 20px;
background: #fcf;
}
.footer {
width: 420px;
height: 100px;
background: red;
}
.clearfix:after {
clear:both; 
display:block;
height:0;
content:"\200B";
}
.clearfix { 
*zoom:1; 
}
</style>
</head>
<body>
<div class="wrap">
<div class="main clearfix">
<div>清除浮动方法大全</div>
<div>html学习</div>
</div>
<div class="footer"></div>
</div>
</body>
</html>
lixiaohong2012
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML5 清除浮动
08-14
NULL 博文链接：https://onestopweb.iteye.com/blog/2316146
DIV+CSS通用样式布局实例代码
09-25
}`：创建了一个清浮动的类，用于清除浮动的影响，确保后续元素不会因浮动元素而受到影响。 4. 对于`#head`、`#container`、`#content`、`#side`和`#foot`，分别定义了各自的背景色、高度、宽度等属性。例如，`#...
清除浮动最常用的四种方法
weixin_44723072的博客
08-09 1万+
1、为什么要清除浮动 开发过程中，浮动是需要掌握的一个技能，页面布局当中，在无法确定子元素的高度（height）时，我们无法给父级标签一个固定的高度（height），我们想要的是，由子元素的高度去控制父元素的高度。 所以，当子元素设置了浮动（float）属性之后，父元素的高度没有进行设置，这样就会导致父元素的高度塌陷(原本的height被重置为0)，这就涉及到了清除浮动的重要性 2、清除浮动的三种方法 第一种方法：额外标签法 该方法是在浮动元素末尾添加一个空的标签，再给空标签添加一个清除浮动的样式，如下 h
清除浮动代码
weixin_43507141的博客
09-08 732
清除浮动经典代码
CSS 8种清除浮动的方法
Xiaoming's Blog
03-14 1128
在用DIV+CSS布局时通常都会用到浮动（float）来完成页面布局，浮动（float）会使当前标签产生向上浮的效果，同时会影响到前后标签、父级标签的位置及 width height 属性。如果在布局中使用了浮动（float）而未进行合理的清除浮动，就会使页面产生错误。
清除浮动的5种方法
weixin_38563784的博客
05-18 4523
清除浮动 盒子塌陷
CSS清除浮动_2种方法源代码.zip
01-04
本文将详细讲解两种常见的CSS清除浮动的方法，并通过提供的源代码进行实例解析。 ### 方法一：clearfix类 `clearfix` 类是最常用的清除浮动方法之一，它并不需要添加额外的HTML元素，而是利用CSS伪类来解决。这种...
CSS学习之类目之间竖线的练习实例
09-27
本文将详细讲解三种实现类目之间竖线的方法，并通过一个实例介绍如何利用CSS优雅地处理这个问题。 首先，我们来看第一种方法：使用背景图。这种方法通常是在每个`<a>`标签内设置一个具有1像素宽度的背景图像，通过...
CSS 网页布局排版实例
09-25
- `clear: both`: 清除浮动，防止父元素因浮动元素而高度塌陷。在这个例子中，应用于`#footer`，确保底部栏不被浮动元素影响。 4. **内容与侧栏的布局** - `padding-right: 200px`: 在内容区域(`#content`)增加右...
CSS3定位和浮动详解
12-13
**实例代码**： ```css #position1 { width: 100px; height: 100px; background-color: blue; position: relative; left: 20px; top: 20px; z-index: 2; } #position2 { width: 100px; height: 100px; ...
清除浮动的三种常用方法
ljw_Josie的博客
10-23 458
一，添加额外的标签 通过在浮动元素末尾添加一个空的标签例如 ，其他标签br等亦可。 添加额外标签 .main{float:left;} .side{float:right;} .footer 二，用伪类：after写入空白元素来清 .Box{ width:300px; background:#CCC; padding-bottom:10px; margin-bottom
HTML-浮动与清除浮动
小头Sophia
12-10 1万+
1.浮动：float：left；right；none 2.浮动的模块是不占用位置的，如下： 如果给上面的div1和div2加上左浮动，则div3就会上移，出现如下所示效果： 为了让div1和div2占有它原来的位置，让div3显示在它们下面，则要清除浮动。 关于浮动的清除有以下几种： 1）clear 2）添加额外的标签 3）伪元素 3.开发工具：WebSto
在html中清除浮动的代码,css 两种清除浮动经典实例代码
weixin_29913191的博客
06-10 1020
一、使用空标签清除浮动*{margin:0;padding:0;}body{font:36px bold; color:#f00; text-align:center;}#layout{background:#ff9;}#left{float:left;width:20%;height:200px;background:#ddd;line-height:200px;}#right{float:ri...
HTML中清除浮动的几种方法
热门推荐
请叫我二狗哥
04-10 2万+
清除float的常见几种方式： 清除浮动方法（1）在浮动元素后面使用一个空的自身清除浮动的元素。 例如 <div style="clear:both;"></div> 实例：清除容器中子元素的浮动，让父元素塌陷的高度恢复。 <div class="content"> <div class="div1 son">&...
聊天室、websocket、socket.io、毕业设计.zip
07-27
聊天室、websocket、socket.io、毕业设计.zip
微麦电影购票小程序，分为三部分-小程序端-商家（影院）后台与官方后台.zip
07-27
微麦电影购票小程序，分为三部分-小程序端-商家（影院）后台与官方后台.zip
防盗门进销存管理系统（SDIMS）.zip
07-27
防盗门进销存管理系统（SDIMS）.zip
Matlab实现蝗虫优化算法GOA-CNN-BiLSTM-Mutilhead-Attention多变量时序预测.rar
最新发布
07-27
1.版本：matlab2014/2019a/2021a 2.附赠案例数据可直接运行matlab程序。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。 5.作者介绍：某大厂资深算法工程师，从事Matlab算法仿真工作10年；擅长智能优化算法、神经网络预测、信号处理、元胞自动机等多种领域的算法仿真实验，更多仿真源码、数据集定制私信+。 替换数据可以直接使用，注释清楚，适合新手
C# DXF操作实例：图形绘制与标注代码集锦
"这份文档是关于使用.NetDxf库在C#中操作DXF文件的实例代码集合，包含了从基础的图形绘制、图层管理到复杂的尺寸标注、形状镜像、实体修改等一系列功能的实现。" 这篇文档详尽地展示了如何使用.NetDxf库进行C#编程...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值