CSS clear both清除浮动
2016-02-18 13:56
851 查看
DIV+CSS clear both清除产生浮动
我们知道有时使用了css float浮动会产生css浮动,这个时候就需要清理清除浮动,我们就用clear样式属性即可实现。
接下来我们来认识与学习css clear知识与用法。
clear清除浮动目录
clear语法与结构
div clear常用地方
css+div案例
DIVCSS5总结
一、clear语法与结构 -
1、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清除浮动。
1、案例css代码:
2、案例html代码片段:
3、案例效果截图
css div浮动产生与清除案例截图
这个时候需要clear来清除浮动,让css命名为“divcss5”盒子撑开。
4、清除浮动方法
我们在css代码中加入CSS代码:
Html代码中“.divcss5”盒子</div>结束标签前加入代码:
最终使用div css clear清除浮动后应用用法案例截图
Clear使用用法案例截图
扩展阅读:CSS清除float浮动技巧 http://www.divcss5.com/jiqiao/j406.shtml
四、DIVCSS5总结 -
使用clear可以清除float产生的浮动,注意clear样式对象加入位置,如上案例对“.divcss5”清除浮动,我们就只需要在此对象div标签结束前加入即可清除内部小盒子产生浮动。而一般常用clear:both来清除浮动,其它clear:left和clear:right可以下来根据clear both案例扩展学习实践。
我们知道有时使用了css float浮动会产生css浮动,这个时候就需要清理清除浮动,我们就用clear样式属性即可实现。
接下来我们来认识与学习css clear知识与用法。
clear清除浮动目录
clear语法与结构
div clear常用地方
css+div案例
DIVCSS5总结
一、clear语法与结构 -
TOP
1、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常用地方 -
TOP
我们常常用于使用了float css样式后产生浮动,最常用是使用clear:both清除浮动。比如一个大对象内有2个小对象使用了css float样式为了避免产生浮动,大对象背景或边框不能正确显示,这个时候我们就需要clear:both清除浮动。三、css+div案例 -
TOP
DIVCSS5案例说明:这里设置一个css宽度(css width)为500px;盒子,css边框(cssborder)为红色,css背景(css background)为黑色、css
padding为10px盒子,里面包裹着2个小盒子,一个css 浮动靠右(float:right)、一个css float靠左(float:left),两者边框为白色,背景颜色为灰色,宽度为200px,css高度(css
height)为150px。这样我们来观察案例效果,看浮动产生并使用clear清除浮动。
1、案例css代码:
.divcss5{width:500px;background:#000;border:1px solid #F00;padding:10px} .divcss5_left,.divcss5_right{ border:1px solid #FFF;background:#999;width:200px;height:150px } /* css注释: 这里为了截图分别,对css代码换行 */ .divcss5_left{ float:left}/* css注释: 设置浮动靠左 */ .divcss5_right{ float:right}/* css注释:设置浮动靠右 */
2、案例html代码片段:
<div class="divcss5"> <div class="divcss5_left">float left盒子</div> <div class="divcss5_right">float right盒子</div> </div>
3、案例效果截图
css div浮动产生与清除案例截图
这个时候需要clear来清除浮动,让css命名为“divcss5”盒子撑开。
4、清除浮动方法
我们在css代码中加入CSS代码:
.clear{ clear:both}
Html代码中“.divcss5”盒子</div>结束标签前加入代码:
<div class="clear"></div>
最终使用div css clear清除浮动后应用用法案例截图
Clear使用用法案例截图
扩展阅读:CSS清除float浮动技巧 http://www.divcss5.com/jiqiao/j406.shtml
四、DIVCSS5总结 -
TOP
使用clear可以清除float产生的浮动,注意clear样式对象加入位置,如上案例对“.divcss5”清除浮动,我们就只需要在此对象div标签结束前加入即可清除内部小盒子产生浮动。而一般常用clear:both来清除浮动,其它clear:left和clear:right可以下来根据clear both案例扩展学习实践。
相关文章推荐
- CSS3 animation-fill-mode 属性
- css3动画实例分段讲解
- Div和CSS编写中对包含选择器和通配选择器的使用
- 简要讲解CSS中的类型选择器、ID选择器、类选择器
- sencha touch2.4.2的样式
- 常用js,css
- css实现绝对定位元素居中
- 第 5 章 固定层效果
- CSS浮动原理
- IOS设置状态栏样式和背景
- DIV+CSS 命名规范
- 文字多行缩进 css 兼容浏览器
- 各种居中系列
- 有用的css代码段
- js获取样式、currentStyle和getComputedStyle的兼容写法
- NEC css规范
- css的text-indent属性实现段落第一行缩进
- CSS水平居中和垂直居中解决方案(转)
- CSS中边框使用负边距值的奇技淫巧
- 自定义按钮样式