html clear属性值,【Web前端基础知识】clear使用方法
【摘要】
前端即网站前台部分，运行在PC端，移动端等浏览器上展现给用户浏览的网页。下面是【Web前端基础知识】clear使用方法，小编建议有准备参加考试的备考生一定要合理规划时间，仔细阅读相关规定，提前做好考前准备。下面让我们看看【Web前端基础知识】clear使用方法的具体内容：
浮动是我们前端布局的重要属性，而浮动产生的高度塌陷问题也一直伴随在我们布局过程中。众所周知，clear：both是浮动产生高度塌陷的克星，但你真的认识clear吗。
在技术文档中对于clear的值是这样解释的：
我们在实例中看一下：
首先：在一个大盒子里放4个p标签，让p标签全部左浮动，此时会产生高度塌陷问题
HTML代码如下：
css代码如下：
在前两个p标签之后添加一个空的块元素div，给这个块元素clear：left属性
HTML代码如下：
css代码如下：
.clear{ clear: left; }
看起来是实现了元素左侧不允许有浮动，但如果给第2个p标签一个右浮动
css代码如下：
p:nth-of-type(2){
float: right;
height: 100px;
background-color: orange;
}
会发现父元素只撑开了第一个左浮动的p标签的宽度。
此时，把中间的div元素clear值改成right，我们再来看
css代码如下：
.clear{ clear: right; }
增加第一个p标签的高度后
css代码如下：
p:nth-of-type(1){
height: 200px;
background-color: yellow;
}
按照文档中说明来看，应该是元素右侧不能有浮动元素，但第3个和第4个p标签一直都是没有变化的，相反，元素之前的右浮动元素撑开了父元素的高度。
再看看clear值为both，在值为both时修改第一个p元素的高度
css代码如下：
.clear{ clear: both; }
这种情况下，无论之前的是左浮动还是右浮动都可以清除掉
到这里，我们发现clear是清除掉元素之前的浮动元素
clear：left 清除这个元素之前元素的左浮动
clear：right 清除这个元素之前元素的右浮动
clear：both 清除这个元素之前元素的左浮动和右浮动
最后注意：clear属性只对块元素有效哦!!!
以上就是【Web前端基础知识】clear使用方法的内容，对前端感兴趣的小伙伴们可以关注考必过，获取更多前端前沿资讯和最新技术。最新消息小编会第一时间发布，助力大家考试，加油！
html clear属性值,【Web前端基础知识】clear使用方法相关推荐
- Web前端基础知识整理
1. 前端基础知识 文件分类 XML(扩展标记语言) 装载有格式的数据信息,用于各个框架和技术的配置文件描述 特点: 扩展名为.xml 内容区分大小写 标签要成对出现,形成容器,只能有一个 标签按正确 ...
- WEB前端 基础知识汇总
javascript: JavaScript中如何检测一个变量是一个String类型?请写出函数实现 typeof(obj) === "string" typeof obj === ...
- Web前端基础知识总结
一.HTML和CSS 你做的页面在哪些流览器测试过?这些浏览器的内核分别是什么? IE: trident内核 Firefox:gecko内核 Safari:webkit内核 Opera:以前是pres ...
- Web 前端基础知识面试大全
目录 一.HTML 1.对 HTML 语义化的理解 2.区别:src 和 href 3.DOCTYPE 的作用 4.HTML5 的新特性 5.script 标签中的 defer 和 async 6. ...
- web前端基础知识查漏补缺,JavaScript面试题,赶紧收藏
1介绍js的基本数据类型 js一共六种基本数据类型,分别是 undefined null boolean number string ,还有es6新增的symbol 和 es10新增的bigint. ...
- web前端基础知识：html布局如何应用？
网站布局 大多数网站会把内容安排到多个列中(就像杂志或报纸那样). 可以使用 或者 元素来创建多列.CSS 用于对元素进行定位,或者为页面创建背景以及色彩丰富的外观. 提示即使可以使用 HTML 表格 ...
- Web前端基础知识：ES5及ES6this详解
今天,我们学习一下JavaScript中的this.我们从什么是this,ES5及ES6中this的几种情况进行学习.让this变的so easy,我们这里说的都是非严格模式下. 什么是this th ...
- web前端基础知识-（六）jQuery-补
一.JS正则 1.定义正则表达式 JavaScript种正则表达式有两种定义方式,定义一个匹配类似 <%XXX%> 的字符串: 1)构造函数 var reg=new RegExp('< ...
- Web前端基础知识整理（一）
1. typeof返回的数据类型 typeof返回的数据类型包括undefined.string.number.boolean.symbol.Object.Function类型. 2. 检查数组的方式 ...
最新文章
- 你和人工智能的对话，正在被人工收听
- C#获取控制台句柄的方法
- 模块化数据中心有什么优势？
- AttnGAN: Fine-Grained Text to Image Generation with Attentional Generative Adversarial Networks论文解读
- python3 scarpy
- Linux日志系统分析：rsyslog、syslog和klog
- C++总结笔记（二）——指针
- 【Android使用Shape绘制虚线，在4.0以上的手机显示实线】解决方式
- 错误代码： 1066 Not unique table/alias: #39;c#39;
- EditPlus运行java时如何从键盘输入数据
- 谈谈计算机专业职业技能,计算机专业职业技能论文
- matlab图像处理教学视频,MATLAB图像处理实例详解视频教程
- 月下夜想曲200.6（攻略3）
- 运行tomcat 时报错，提示无法找到相关的jar包 Publishing failed with multiple errors Error reading file
- Linux命令--tac（倒序查看文件所有内容）
- python多线程多个cpu_为什么python的多线程不能利用多核CPU？
- 极客时间运维进阶训练营第二周作业
- 【人机对话】对话机器人技术简介：问答系统、对话系统与聊天机器人
- 二分+思维点点之间最大距离
- c语言中03怎么表示成30,C语言入门篇-03