css float属性详解
定义和用法
float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动。浮动元素会生成一个块级框,而不论它本身是何种元素。
如果浮动非替换元素,则要指定一个明确的宽度;否则,它们会尽可能地窄。
注释:假如在一行之上只有极少的空间可供浮动元素,那么这个元素会跳至下一行,这个过程会持续到某一行拥有足够的空间为止。
值 | 描述 |
---|---|
left | 元素向左浮动 |
right | 元素向右浮动 |
none | 默认值。元素不浮动,并会显示在其在文本中出现的位置 |
inherit | 规定应该从父元素继承 float 属性的值 |
下面举几个例子来看看float有哪些妙用
实例1
css代码
.wrap{
width: 40%;
margin:0 auto;
background: #eee;
}
.div1{
width: 200px;
height: 100px;
border:1px solid red;
}
.div2{
width:100px;
height: 80px;
border:1px solid green;
}
.div3{
width:80px;
height: 60px;
border:1px solid blue;
}
这是按照正常文档流来输出的。
下面我们改一下div1的样式
css代码
.div1{
width: 200px;
height: 100px;
float:left;
border:1px solid red;
}
再来看下效果
div2由于受到div1的浮动影响,div2填充了div1遗留下来的空间,发生重叠,div2在上面。div2的文本则被div1挡住,围绕在div1的周围。
这是因为浮动是不彻底的脱离文档流,当某个元素使用float时,其他盒子会无视这个元素,但其他盒子内的文本依然会为这个元素让出位置,环绕在周围。而对于使用绝对布局脱离文档流的元素,其他盒子与其他盒子内的文本都会无视它。
可以通过给受影响的元素设置clear属性来清楚浮动,值可以是left,right,both。
再来看一个例子
实例2
css代码
.wrap{
width: 40%;
margin:0 auto;
background: #eee;
}
.div1{
width: 200px;
height: 100px;
float:left;
border:1px solid red;
}
.div2{
width:100px;
height: 80px;
float:left;
border:1px solid green;
}
.div3{
width:80px;
height: 60px;
float:left;
border:1px solid blue;
}
效果:
当把3个div都设置为左浮动后,由于没有给wrap设置高度,没有未浮动的内容给它撑开,wrap的高度缩为0。
可以给wrap设置overflow来清楚浮动影响:
css代码
.wrap{
width: 40%;
margin:0 auto;
background: #eee;
overflow: hidden;
_zoom:1;
}
效果:
_zoom:1;属性是IE浏览器的专有属性,Firefox等其它浏览器不支持。它可以设置或检索对象的缩放比例。
效果:
实例3
css代码
img
{
float:right;
border:1px dotted black;
}
span
{
float:left;
width:2.5em;
font:400%/80% bold algerian,courier;
}
效果:
通过给和设置浮动,让它们显示在父元素
的左上角和右上角,同时实现文字环绕。
float还可以用来实现横向两列布局,三列布局,水平菜单等,这里就不列举了。
css float属性详解的更多相关文章
- [转]CSS vertical-align属性详解 作者:黄映焜
CSS vertical-align属性详解 posted @ 2014-08-26 17:44 黄映焜 前言:关于vertical-align属性. 实践出真知. 垂直居中. 第二种用法. ...
- css 12-CSS3属性详解:动画详解
12-CSS3属性详解:动画详解 #前言 本文主要内容: 过渡:transition 2D 转换 transform 3D 转换 transform 动画:animation #过渡:transiti ...
- css 11-CSS3属性详解(一)
11-CSS3属性详解(一) #前言 我们在上一篇文章中学习了CSS3的选择器,本文来学一下CSS3的一些属性. 本文主要内容: 文本 盒模型中的 box-sizing 属性 处理兼容性问题:私有前缀 ...
- css 14-CSS3属性详解:Web字体
14-CSS3属性详解:Web字体 #前言 开发人员可以为自已的网页指定特殊的字体(将指定字体提前下载到站点中),无需考虑用户电脑上是否安装了此特殊字体.从此,把特殊字体处理成图片的方式便成为了过去. ...
- CSS position overflow float 属性 详解
position overflow float 几个属性比较容易混淆,写一段代码详解各自具体情况: position在w3school的可能取值: 值 描述 absolute 生成绝对定位的元素,相 ...
- css display属性详解
css display属性在对css做layout设计时非常重要,它的值有以下几种: Value Description Play it inline Default value. Displays ...
- float属性详解
内容: 1.block与inline复习 2.float介绍 3.float作用 4.清除浮动 1.block与inline复习 1 block元素是独立的一块,独占一行 2 多个block元素会各自 ...
- CSS透明属性详解
.transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; ...
- CSS透明属性详解代码
透明往往能产生不错的网页视觉效果,先奉上兼容主流浏览器的CSS透明代码: 代码如下: .transparent_class { filter:alpha(opacity=50); -moz-opaci ...
随机推荐
- 转3xian之所在 (一位ACM大牛的博文)
3xian的经历和见解...我深思... 最后一天,漫天飘起了雪花,假装欢送我离去. 这次WF之战不太顺利,早期的C题大概花了1秒钟构思,然而由于输出格式多了一个空格直到两个半小时才逃脱Wrong A ...
- Pascal输出星星
program Project2; {$APPTYPE CONSOLE} uses SysUtils; var i,j:integer; begin { TODO -oUser -cConsole M ...
- Linq list 排序,Dictionary 排序
C# 对List成员排序的简单方法 http://blog.csdn.net/wanzhuan2010/article/details/6205884 LINQ之路系列博客导航 http://www. ...
- linux上用mplayer播放264文件
Linux上,264视频裸码流可用mplayer进行播放. 同时,可用-fps参数控制帧率. 参考:http://www.chinavideo.org/archiver/?tid-16088.html
- MVC接受JSON的一些注意事项
1.MVC接受前端传的JSON数据,相应的接受参数的位置使用@RequestBody注解进行标注 2.JSON传空字符串时,后台使用Integer进行接受时,会报for String ''一堆乱七八糟 ...
- ES6躬行记(23)——Promise的静态方法和应用
一.静态方法 Promise有四个静态方法,分别是resolve().reject().all()和race(),本节将着重分析这几个方法的功能和特点. 1)Promise.resolve() 此方法 ...
- Ceph之对象存储网关RADOS Gateway(RGW)
一.Ceph整体架构及RGW在Ceph中的位置 1.Ceph的整体架构 Ceph是一个统一的.分布式的的存储系统,具有优秀的性能.可靠性和可扩展性.Ceph支持对象存储(RADOSGW).块存储(RB ...
- SQL标量函数-日期函数
select day(createtime) from life_unite_product --取时间字段的天值 select month(createtime) from life_uni ...
- Android UI 设计规范
1. 基础常识 1.1 主流屏幕尺寸 标识 屏幕尺寸 hdpi 480 * 800 xhdpi 720 * 1280 xxhdpi 1080 * 1920 1.2 图标尺寸 标识 启动图标尺寸 菜单图 ...
- 关于k阶裴波那契序列的两种解法
在学校的anyview的时候,遇到了这个题: [题目]已知k阶裴波那契序列的定义为f(0)=0, f(1)=0, ..., f(k-2)=0, f(k-1)=1;f(n)=f(n-1)+f(n-2)+ ...