浮动
2015-11-08 16:39
190 查看
浮动 就是让设置的标签产生浮动效果,就是脱离原来页面的标准输出流。 正常情况下,HTML页面中块元素都是从上倒下排列的。如果想实现左右结构。 可以使用float。 比如 <div style="widht:500px"> <div style="float:left;width:200px">左</div> <div style="float:left;width:200px">右</div> </div> 这样,这个两个DIV标签就在同一行上了(同时靠左),当然有个前提,就是他们俩的父元素的宽度要至少大于400px,这样才能在同一行上。这个结果是两个DIV的右侧会空出100PX的空白 <div style="widht:500px"> <div style="float:left;width:200px">左</div> <div style="float:right;width:200px">右</div> </div> 以上写法,也是在同一行。不同的是,一个靠左,一个靠右。 这里边的两个DIV的中间有100PX的空白。 需要注意的是,当标签使用了float属性后,就脱离了标准输出流,就不受页面约束了。这样不方便,也不利于布局。 所以,一般浮动之后要清除浮动。 <div style="widht:500px"> <div style="float:left;width:200px">左</div> <div style="float:right;width:200px">右</div> <span style="clear:both"></span>/*清除浮动*/ </div> 这样,页面整体的布局结构就基本上没有被破坏了。 浮动的:当浮动一个文本类型元素时,如果没有设定width宽度,元素内容就会折叠到最小宽度; 当float不为none时,浮动元素被视为块级; 浮动元素停留到包含它的父级元素的内容区域内,不会穿过padding区域; 浮动元素的margin不会重合。
相关文章推荐
- 在windows环境下安装redis和phpredis的扩展
- 常用排序算法
- 20135316王剑桥 linux第七周课实验笔记
- jquery简单的选项卡
- 使用JSON格式传递数据,获取JSON的值
- 关于网络三 - XML 生成及解析、JSON 解析
- 如何理解多个域名解析到同一个服务器空间上?
- 布局复习---BFC
- trim mybtais
- 超实用的JavaScript代码段 Item5 --图片滑动效果实现
- 求生之路升级2140常见问题
- android获得sd卡和本机内存大小
- Spark RDD中Transformation的map、flatMap、mapPartitions、glom详解
- 快速排序
- linux 入门级常用指令
- 文字导航栏的做法
- UVALive-4452 The Ministers' Major Mess (2-SAT)
- 超实用的JavaScript代码段 Item5 --图片滑动效果实现
- android85 短信防火墙
- 抽屉菜单和5.0Collapsing工具栏