论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库Asp.net  | Flash AS
当前位置 > 文字教程 > Dreamweaver教程
Tag:Dreamweaver CS,Dreamweaver 8,css,表格,布局,字幕,flash,声音,菜单,乱码,图层,行为,视频教程

网页制作:float和clear的区别

文章类别:Dreamweaver | 发表日期:2012-5-4 8:54:27

网页制作:float和clear的区别


<html>
< head>
< title>test</title>
< style type="text/css">
body,div{margin:0; padding:0; }
.one{width:100px; height:30px; background:#900; float:left; clear:right;}
.two{width:150px; height:50px; background:#009; }
< /style>
< /head>
< body>
< div class="one">sometext.</div>
< div class="two">sometext.</div>
< /body>
< /html>

1、div中的text内容排布是什么规律,为什么text内同不会被遮盖?
2、在.one中加入红色clear后是不是应该清楚掉.one右侧的浮动影响,也就是说右侧不能出现浮动div,而在.two中加入float:left后.two仍旧像教程中一样浮动横向排列;
3、、在.two中加入float后再加入clear:left就能实现清除掉浮动效果,.two在.one下面排列;

解答:
   
第一点里面的TEXT内同(容?)不会被遮盖是指two里面的吗?我是这样理解的,div是块级元素,块级元素之间默认的效果应该是你的第三张图那样,当你给.one一个左浮动后它就脱离了文档流,所以.two就移上去了,但是.two里面的文字还是被挤下来了,那个高度刚好是.one的高度。
    第二点,clear清除的不是自己的浮动,而是上一个标签的浮动,所以你在.one里面加clear其实没有任何作用,无论是clear:left,clear:right还是clear:both都一样,像你说的,要清除掉浮动效果只能在.two里面加clear:left才行。

视频教程列表
文章教程搜索
 
Dreamweaver推荐教程
Dreamweaver热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058