登录|注册 帮助
 
 
 
常用 免费 热销 推荐 建站
热点 商业 共享 MVC 毕设
 
会员 充值 赚钱 积分 推广
论坛 技术 职场 留言 随笔
 
模板 Html模板 PSD
特效 网页特效 插件
  首页 免费源码 积分兑码 源码市场 商业精品 博文推荐 活跃榜 充值 源码上传↑  
当前位置:首页 > 博文推荐

浮动的基础

发布时间:2015-9-16 9:32:52     阅读量:329     作者:myaspx.com
简介: 就是让设置的标签产生浮动效果,就是脱离原来页面的标准输出流。

浮动
就是让设置的标签产生浮动效果,就是脱离原来页面的标准输出流。
正常情况下,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不会重合。

文章评论

源码点评
点评列表
溜达
溜达 发表于:2017-10-27 20:26:33

get、

0个回复(展开/收缩)
5月源码
5月源码 发表于:2017-10-27 15:23:22

巩固学习下基础

0个回复(展开/收缩)

打赏站长

其他推荐

百度广告代码