设置css属性clear的值为什么时可清除左右两边浮动_clear both
大家好,又见面了,我是你们的朋友全栈君。
DIV+CSS clear both清除产生浮动
我们知道有时使用了css float浮动会产生css浮动,这个时候就需要清理清除浮动,我们就用clear样式属性即可实现。
接下来我们来认识与学习css clear知识与用法
一、clear语法与结构
clear : none | left|right| both
2、clear参数值说明
none : 允许两边都可以有浮动对象
both : 不允许有浮动对象
left : 不允许左边有浮动对象
right : 不允许右边有浮动对象
3、clear解释:
该属性的值指出了不允许有浮动对象的边情况,又对象左边不允许有浮动、右边不允许有浮动、不允许有浮动对象
4、css结构
div{clear:left}
div{clear:right}
div{clear:both}
二、div clear常用地方
我们常常用于使用了float css样式后产生浮动,最常用是使用clear:both清除浮动。比如一个大对象内有2个小对象使用了css float样式为了避免产生浮动,大对象背景或边框不能正确显示,这个时候我们就需要clear:both清除浮动。
三、css+div案例
DIVCSS5案例说明:这里设置一个css宽度(css width)为500px;盒子,css边框(css border)为红色,css背景(css background)为黑色、css padding为10px盒子,里面包裹着2个小盒子,一个css 浮动靠右(float:right)、一个css float靠左(float:left),两者边框为白色,背景颜色为灰色,宽度为200px,css高度(css height)为150px。这样我们来观察案例效果,看浮动产生并使用clear清除浮动。
效果截图
加上了clear:both
四、DIVCSS5总结
使用clear可以清除float产生的浮动,注意clear样式对象加入位置,如上案例对“.divcss5”清除浮动,我们就只需要在此对象div标签结束前加入即可清除内部小盒子产生浮动。而一般常用clear:both来清除浮动,其它clear:left和clear:right可以下来根据clear both案例扩展学习实践。
——————————–个人总结——————————–
意思就是消除之前的浮动。- –
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/197261.html原文链接:https://javaforall.cn
相关文章
- CSS中如何解决子元素继承父元素的opacity属性?
- CSS新增2D,3D属性
- 在html中加入外部css样式,如何引入CSS样式表?
- 每日一学Vue脚手架中基础的ref属性与原生id区别
- 【说站】css旋转属性如何理解
- 【说站】CSS简单常用属性的总结
- gridview的属性_grid css
- css里的clear_css display属性的值及用法
- CSS中字体和文本关键属性值
- CSS媒体查询_css网页
- [翻译] WPF 中用户控件 DataContext/Binding 和依赖属性的问题
- CSS font-family 属性设置字体
- Linux文件基本属性与文件查找
- 从微信聊天框开始学习CSS属性filter
- 【CSS教程】紫色渐变登陆布局html+css代码
- Vue3: 巧用自定义全局属性,封装只为高效率
- font字体属性(字体/字体大小/字体粗细/文字样式)及复合写法
- CSS常用的属性命名详解编程语言
- CSS 属性设置优先级问题详解编程语言
- SE24新建类步骤以及如何继承一个系统类的属性详解编程语言
- Spring Bean的配置及常用属性
- 属性Oracle的CSS属性:让你的网站更出彩(oracle的css)
- 深入了解Oracle表空间属性,管理数据存储更加精准。(oracle表空间属性)
- CSS教程之css选择器、属性、值
- 打印出python当前全局变量和入口参数的所有属性
- script标签属性type与language使用选择
- c#后台修改前台DOM的css属性示例代码
- JavaScript访问CSS属性的几种方式介绍