注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

叶落非殇

charset="UTF-8"

 
 
 

日志

 
 

关于clear:left和clear:right以及clear:both的浮动影响范围的个人理解  

2015-04-26 11:24:49|  分类: 前端开发基础 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
在学习网页制作过程中,网页中往往会有浮动元素,为了不影响其他非浮动元素,往往需要清浮动,关于clear清浮动又有left、right、both三种,那么这三种到底有什么区别以及什么时候该使用哪种,因为清浮动的概念较为抽象,那么我们就用实例来说明,我们可以分别定义左右浮动方框各两个,然后我们分情况看运行结果:
1、两个都是左浮动
2、两个都是右浮动
3、左右浮动各一个
运行后缩小浏览器拉伸浏览器观察其浮动规律
先放代码:

<!doctype html>
<html>
<head>
<meta charset="utf-8"/>
<title>左右清浮动解析</title>
<style>
.box1 {
width: 200px;
height: 200px;
background-color: #f00;
float: left;
}
.box2 {
width: 200px;
height: 200px;
background-color: #0f0;
float: left;
}
.box3 {
width: 200px;
height: 200px;
background-color: #00f;
float: right;
}
.box4 {
width: 200px;
height: 200px;
background-color: #f0f;
float: right;
}
</style>
</head>
<body>
<div class="box1">左浮动元素1</div>
<div class="box3">右浮动元素1</div>

<div class="box2">左浮动元素2</div>
<div class="box4">右浮动元素2</div>

<div style="clear:right">当前清浮动位置</div>
</body>
</html>

这里更改情况需要在body内更改box或者做相应的删减即可。
我们看运行结果:
1、两个都是左浮动
①clear:left时

<body>
<div class="box1">左浮动元素1</div>
<div class="box2">左浮动元素2</div>
<div style="clear:left">当前清浮动位置</div>
</body>


关于clear:left和clear:right以及clear:both的浮动影响范围的个人理解 - 如履薄冰 - 如履薄冰关于clear:left和clear:right以及clear:both的浮动影响范围的个人理解 - 如履薄冰 - 如履薄冰
 
 可以看出此时左清浮动起到了防止左浮动元素浮动到当前浮动位置文本的左边,那么我们可以猜想,如果此处是右浮动,那么结果会是怎样,由于没有右浮动元素,而我们是清右浮动,那么这样清浮动应该是没有效果的,文本会贴着浮动窗口显示。
②clear:right时
上面我们猜想过了,然后可以修改代码

<body>
<div class="box1">左浮动元素1</div>
<div class="box2">左浮动元素2</div>
<div style="clear:right">当前清浮动位置</div>
</body>

运行结果:
关于clear:left和clear:right以及clear:both的浮动影响范围的个人理解 - 如履薄冰 - 如履薄冰
可以看出,前面的猜想没有错,那么如果是两个都是右浮动呢
2、两个右浮动元素
①、clear:left

<body>
<div class="box3">右浮动元素1</div>
<div class="box4">右浮动元素2</div>
<div style="clear:left">当前清浮动位置</div>
</body>

运行前先行猜测结果,由于清浮动位置前方并没有左浮动,左清除并不能阻止右浮动元素右浮,文本应该还是在前面浮动元素应该会在文本右边。

 运行结果:
关于clear:left和clear:right以及clear:both的浮动影响范围的个人理解 - 如履薄冰 - 如履薄冰
运行结果与猜想一致,那么此时如果是clear:right应该会起到当前文本单独一行的效果
②、clear:right

<body>
<div class="box3">右浮动元素1</div>
<div class="box4">右浮动元素2</div>
<div style="clear:right">当前清浮动位置</div>
</body>

运行结果:

 关于clear:left和clear:right以及clear:both的浮动影响范围的个人理解 - 如履薄冰 - 如履薄冰关于clear:left和clear:right以及clear:both的浮动影响范围的个人理解 - 如履薄冰 - 如履薄冰
可以看出来文本确实单独一行不被浮动元素影响。那么左右浮动各一个会有什么不同呢
3、左右浮动各一个
①、clear:left

<body>
<div class="box1">左浮动元素1</div>
<div class="box3">右浮动元素1</div>
<div style="clear:left">当前清浮动位置</div>
</body>


运行结果:
关于clear:left和clear:right以及clear:both的浮动影响范围的个人理解 - 如履薄冰 - 如履薄冰

可以看出文本左浮动下方出来,并不能阻止右浮动,而左浮动的命令是在右浮动之前执行的,那么这里可以猜想,clear应该是影响其之前的浮动元素,而left和right就是清除其之前的左浮动和右浮动。当相应的清浮动找到了相应的浮动元素时,之前的其他浮动元素又会不会受到影响,这里只需要验证这种情况下的clear:right即可
②、clear:right

<body>
<div class="box1">左浮动元素1</div>
<div class="box3">右浮动元素1</div>
<div style="clear:right">当前清浮动位置</div>
</body>

运行后:
关于clear:left和clear:right以及clear:both的浮动影响范围的个人理解 - 如履薄冰 - 如履薄冰
可以看到,当clear:right找到右浮元素时,在该右浮元素之前的其他元素已经不能对其产生影响。

对于clear:both顾名思义就是可以清除左右浮动,对于清除左浮动和右浮动,在没有用父级将多个浮动元素包含时,左浮动与右浮动取决于其之前的浮动元素,可以认为clear可以向前检索直至找到相应的浮动。
 
 *以上理解均属于个人理解,如果误区,欢迎指正,共同学习共同进步。
  评论这张
 
阅读(5)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017