CSS中clear:both的作用
clear:both意思就是清除浮动,例如我们设置了三个div如下:
<div style="line-height: 30px;background-color: #EEEEEE;height: 100px;width: 50px;float: left;padding: 5px;">侧边栏<br>侧边栏
</div>
<div style="width: 150px;float: left;padding: 5px;"><p>内容</p>
</div>
<div style="background-color: #0bbb15;color:white;text-align:center;padding:5px;">底部栏</div>
我们希望最后一个“底部拦”的div可以位于最底下,但是这样写运行发现底部拦位于上方了:
这时候我们在底部栏的div上加入clear:both;:
<div style="background-color: #0bbb15;color:white;clear:both;text-align:center;padding:5px;">底部栏</div>
运行发现,底部栏div成功位于底部了:
这是因为使用clear:both;清除了前面两个div设置的float: left;(浮动)
CSS中clear:both的作用相关推荐
- html clear的作用,css中clear的作用是什么?
当属性设置float(浮动)时,它的物理位置已经脱离文档流了,但大多时候我们希望文档流能识别float(浮动),或者希望float(浮动)后面的元素不受float(浮动)的影响,这个时候我们就需要使用 ...
- css中clear:both属性的理解及用法
css中clear:both属性的作用是清除浮动,设置了浮动就会破坏文档流结构,影响后边的布局,此时在设置清除浮动便可解决这一问题,可以认为,设置了clear:both的当前元素会把前边元素中设有浮动 ...
- 在CSS中clear属性的妙用
这里向大家描述一下在CSS中clear属性妙用,图片和文字元素出现在另外元素中,那么它们(图片和文字)可称为浮动元素(floatingelement).使用clear属性可以让元素边上不出现其它浮动元 ...
- html中zoom方法,css中的zoom的作用
原标题:css中的zoom的作用 小标签大用处,今天重庆IT培训www.ztxuexi.cn就给大家说说css中的zoom的作用 : 1.检查页面的标签是否闭合 不要小看这条,也许折腾了你两天都没有解 ...
- html设置margin无效,CSS中margin不起作用的原因及解决方法
margin是一个属性,指定元素和元素之间的间距,但不能为内联元素指定边距,本篇文章将给大家介绍关于CSS中margin不起作用的原因及解决方法. margin不起作用的原因 对于初学者来说,可能会经 ...
- CSS中zoom属性的作用
这里介绍一下CSS中的Zoom属性,这个属性一般不为人知,甚至有些CSS手册中都查询不到.但经常会在一些css样式中看到它出现. Zoom属性是IE浏览器的专有属性,Firefox等浏览器不支持.它可 ...
- CSS中clear“清除浮动”的作用原理
CSS中clear"清除浮动"的作用原理 之前看视频中,总听到说clear不是清除浮动,而是消除浮动带来的影响,纠结了一天,没有理解,现在终于能明白这是什么意思了. 下面直接用代码 ...
- css中clear的作用是什么?
clear : none | left | right | both. 对于CSS的清除浮动(clear),一定要牢记:这个规则只能影响使用清除的元素本身,不能影响其他元素. 清除浮动方法, 1,给父 ...
- 关于css中clear:both清除浮动防止父级元素高度坍塌的原理
不少小伙伴在防止高度坍塌时都会在浮动元素后面写入一个div,再在里面写入clear:both属性来清除浮动.那么今天就在此探究一下clear:both的工作原理. 先说一下clear:both的作用 ...
最新文章
- java知识总结-15
- opporeno3详细参数_vivox30和opporeno3哪个好 vivox30和opporeno3对比评测
- Shell第三篇:基本语法
- Python eval 函数 -Python零基础入门教程
- 没有规则可制作目标modules_Modules简介
- 数据驱动和关键字驱动
- 基于Swing与JavaFx的音乐播放器——轻音
- js定时刷新页面数据
- 翁凯C语言程序设计期末考试
- MacOS升级Big Sur后32位锐捷客户端排坑历程
- 当国际贸易撞上AI,会产生怎样的化学反应?
- 计算机突然蓝屏重启,最近电脑经常蓝屏重启。
- 基于深度学习的图像篡改识别
- 前端面试题总结(js、html、小程序、React、算法、vue 、全栈热门视频资源)
- lol大区服务器维护,LOL官宣“扩容升级”服务器,排队时间将大大减少,电一玩家喜大普奔!...
- 闲鱼曝光量突然降低是为什么呢?
- 基于嵌入式linux的freetype矢量字体简单显示的实现
- 2.Cocos跑酷游戏——工具篇 Dictionary
- 机器学习 基于加州房价的线性回归实验
- 线程池ThreadPoolExecutor使用简介