如何清除浮动
时间:2022-05-03
本文章向大家介绍如何清除浮动,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
如何清除浮动
大家都知道,浮动会对文档产生影响,具体来看看会对文档产生什么影响?
清除浮动后的效果:
未清除浮动后的效果:
实例代码(未清除浮动):
<!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>独行冰海</div>
</div>
<div class="footer"></div>
</div>
</body>
</html>
解析:页面开发的时候可以为父级标签添加固定高度,但是有时希望内容能够撑开高度(比如内容不固定的时候)。对于不浮动的元素来说,它们是能够撑开外部div的高度的,但是一旦浮动,元素脱离文档流,父级div就相当于没有了内容(上面的例子中类名为main的高度为0了)。这时是没有办法实现内容撑开高度的。此时需要进行清除浮动对布局造成的一系列影响,所以叫清浮动。(不要误解成把浮动清除了,元素就没有浮动了,不是同一概念)。
清除浮动有很多种,如何进行选择清除浮动了?
独行冰海博客中已经讲解了清除浮动的几种方法——http://blog.163.com/hongshaoguoguo@126/blog/static/1804698120131130959204/
梦幻雪冰今天给大家分享的是清浮动的具体代码实现,主要是帮助大家理解哪一种清除浮动比较好,辨析它们的优缺点而已。
一:空标签清浮动
<!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>独行冰海</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>独行冰海</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>独行冰海</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>独行冰海</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>独行冰海</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>独行冰海</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>独行冰海</div>
</div>
<div class="footer"></div>
</div>
</body>
</html>
注释:reset.css文件里面已经写好了after伪元素清浮动,直接调用即可。
- GO语言异常处理机制panic和recover分析
- WordPress前端html代码压缩优化,附对应知更鸟主题压缩报错的解决方案
- 原创插件:网站收录查询和显示WordPress插件(自定义栏目优化版)
- Linux系统crontab备份数据库执行不成功?可能是百分号%在作怪!
- go语言十大排序算法总结
- BaiduSubmit:度娘WordPress结构化数据插件(改进版)
- Android自绘动画实现与优化实战——以Tencent OS录音机波形动画为实例
- Go语言归并排序算法实现
- grep无法查找shell传过来的变量?先注意一下文本格式吧!
- 深入浅出 Retrofit,这么牛逼的框架你们还不来看看?
- nwui —— 又一个go语言图形界面解决方案
- Golang 通用连接池
- 解决JS操作Cookies出现的乱码问题,修复WordPress评论乱码
- 分享一个WordPress外链跳转教程,兼容知更鸟暗箱下载和文章索引
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 常见排序算法及golang 实现
- CentOS 8 安装Git及基本配置
- 创建远程仓库,如何将本地项目上传到GitLab
- mysql索引原理,看这篇就够啦
- TypeScript 设计模式之抽象工厂
- vim插件的安装(NERDTree)
- php7的zval相关介绍
- Zend_string与写时复制
- php的引用类型底层解析
- Roslyn 解决 dotnet core 应用进程间引用找不到 runtimeconfig 依赖文件
- dotnet 在 UOS 国产系统上安装 dotnet sdk 的方法
- 清空Redis集群所有节点的数据工具
- php数组hashtable的巧妙设计
- php运行生命周期--模块初始化php_module_startup
- Visual Studio Code的用户设置相关