清除浮动的七种方式方法（实例代码讲解）
2019独角兽企业重金招聘Python工程师标准>>> 
今天给大家分享的是清除浮动的具体代码实现，主要是帮助大家理解哪一种清除浮动比较好，辨析它们的优缺点而已。清除浮动有很多种，如何进行选择清除浮动呢？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;
}
</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>
以上就是所有清除浮动的方法啦，至于具体用哪种方法，那就由你来定夺了！
转载于:https://my.oschina.net/zhouhang0907/blog/549089
清除浮动的七种方式方法（实例代码讲解）相关推荐
- 前端css 清除浮动的几种方式
浮动的框可以向左或向右移动,直到他的外边缘碰到包含框或另一个浮动框的边框为止.由于浮动框不在文档的普通流中,所以文档的普通流的块框表现得就像浮动框不存在一样.浮动的块框会漂浮在文档普通流的块框上. 清 ...
- 清除浮动的几种方式，以及各自的优缺点
清除浮动的几种方式,以及各自的优缺点 1.使用空标签清除浮动clear:both. 2.给父级div定义overflow:hidden 3.父级div定义伪类:after和zoom(用于非IE浏览器) ...
- 清除浮动的四种方式及其原理
前言: 什么是浮动,浮动给我们造成了什么困扰,我们该使用什么方式来解决它.下面会介绍到为什么要清除浮动以及清除浮动的四种方式. 目录: 前言: 一.为什么要清除浮动 二.清除浮动的第一种方式---给父 ...
- CSS—清除浮动的几种方式
什么是浮动? 特性:1--浮动的元素不会占据标准流的空间,但是会影响标准流中的文本的排版.浮动只有左右浮动.2--浮动元素A的位置与上一个元素有关系.如果上一个元素有浮动,则A的顶部与上一个元素顶部对 ...
- div清除浮动的四种方式
div 清除浮动的四种方式 清除浮动主要是为了解决父元素因为子级浮动引起高度为 0 的问题. 简单来说给父元素加一个高度也能解决这个问题,但是很多情况下不方便给父元素高度.所以,一般情况下,应该让子元 ...
- css 清除浮动的几种方式
css 清除浮动的几种方式 浮动布局和定位布局为css中布局的常用的两种布局方式,而且兼容性会比较好.随着flex的流行,以后会是主流. float布局会脱离文档流,对页面的布局造成影响,比如造成父级 ...
- html中清除浮动的几种方式,清除浮动的几种方法-关于CSS清除浮动的几种方法
CSS清除浮动的3种方法,参考: 方法1: #test{clear:both;} #test为浮动元素的下一个兄弟元素 方法2: #test{display:block;zoom:1;overflow ...
- CSS清除浮动的几种常见方法
文章目录 浮动 优点 缺点 清除浮动 一.额外标签法 实例 二.父级添加overflow属性 实例 三.使用:after 实例 四.使用双伪元素 实例 五.手动设置父级高度 实例 注意 浮动 当元素浮 ...
- css清除浮动的几种方式
前言: CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列. Float(浮动),往往是用于图像,但它在布局时一样非常有用. css浮动 但是使用了float后不清除浮 ...
- CSS中清除浮动的两种方式
在CSS中,父元素中的子元素如果使用了float,会导致父元素塌陷,高度为0. 对于这种情况,常见的解决方式有两种. 一.增加新的div,应用clear:both属性 html: 1 <div ...
最新文章
- iOS 9 适配系列教程
- 计算机图形学基础考试题,计算机图形学基础复习题
- java 自定义http头_HttpClient自定义HTTP头
- 【开发软件】推荐一款MAC OS X 下php集成开发环境mamp
- 计算机数据恢复报告单,计算机数据恢复第三章MBR引导分析篇
- no value specified for java.sql.date,求助No value specified for parameter 2
- 索尼入局电动汽车市场 宣布成立移动出行公司
- SQLite(3) Windows安装小结
- 国际版多时区设计方案【转】
- 计算机无法删除ie,ie删不掉的原因及解决方法【图解】
- 蓝桥杯 算法训练 ALGO-114 黑白无常
- 马哥教育42期第二周作业
- 伪造微信语音文件的过程分析
- DDSM 数据集格式转换 LJPEG to PNG
- mysql自我介绍_自我介绍
- HTTP:Form表单的交互与抓包
- android 识别中文字体,在 Android 上高效准确的进行 OCR 识别，白描帮你实现
- Linux下添加FTP账号和服务器、增加密码和用户，更改FTP目录
- 不用从其计算机修改mac软件,教你不用重启计算机就能修改mac地址
- 小程序开发工具_有哪些好用的微信小程序开发工具？如何选择？