转: CSS中float和clear的理解
2015-11-16 16:14
477 查看
float:浮动,比如,默认的,我们知道,div是占满一行的,现在我们想把两个div显示在一行上,那怎么办呢 <div style="width:100px;">11111</div><div style="width:150px">2222</div> 这样我们就设置了两个div,一个宽度100px,一个宽150px,可预览一下,我们的div仍在两行上,那么怎么把它改到一行上呢,这儿就需要float,设置第一个div的float为left <div style="width:100px;float:left;">11111</div><div style="width:150px">2222</div> 再预览,就可以看到,它们到一行上了。 clear是什么意思呢,clear是清除的意思,它有三个值,left,right,both 很好理解,如果设置了clear:left,它就不怕它的左边有float,同理clear:right,clear:both,是左右都不让有float 举个例子,还是上面的 我们设置第二个div的clear:left,也就是不让它左边有float <div style="width:100px;float:left;">11111</div><div style="width:150px;clear:left;">2222</div> 我们预览一下,就可以看到,尽管第一个div已经float:left了,这两个div仍然在两行上,就是由于第二个div不让它左边有float 因为css的定义是后面的可以覆盖前面的.
相关文章推荐
- 转: 详解css中的display属性
- 三列布局,读《css那些事儿》
- web应用性能优化--采用gzip静态压缩+动态压缩方式压缩js、css文件
- 转: CSS中overflow的用法
- css3太极图效果+自动旋转
- CSS让3个块级元素同行且中间元素居中
- css文字过多以点点省略
- css文字过多以点点省略
- 用php脚本给html中引用的js和css路径打上版本
- Css background背景语法
- css:中文词不断开,整体换行
- css3:user-select属性
- html css常识
- css 创建水平导航条
- Web学习篇之---css基础知识(三)
- css 定制Suckerfish下拉菜单
- CSS背景图拉伸自适应尺寸,全浏览器兼容
- 一波CSS的Checkbox复选框样式代码分享
- css(1)
- JSP中修改alert,comfire样式