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

叶落非殇

charset="UTF-8"

 
 
 

日志

 
 

HTML中为什么要清除浮动的个人理解  

2015-04-25 17:07:34|  分类: 前端开发基础 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
HTML中元素可分为三类:
1、块元素   
2、行元素   
3、第三类元素
块元素标签通常独占一行,排列为上下排列,例如div标签。
行元素标签则体现为不独占一行,排列为并排排列,例如strong标签。
举个例子,假如我们需要将行元素强行转换令其可并排排列,于是我们需要将所要的元素变为浮动型(float)。用水槽原理。我们可将元素视为一个可漂浮物品,从水下按照顺序依次上浮,float:left可以视为物体需要上浮后往左移动,同理float:right可以视为上浮后元素需要往右移动,这里我们定义两个浮动元素:
<!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: 40px;
background-color: #0f0;
float: left;
}
</style>
</head>
<body>
<div class="box1">浮动元素1</div>
<div class="box2">浮动元素2</div>
<div>文档</div>
</body>
</html>
运行结果如下:
HTML中为什么要清除浮动的个人理解 - 如履薄冰 - 如履薄冰
我们可以看到运行结果中,“文档”元素并没有按照div的特性另外单独占一行,而是直接靠着浮动元素列出。由此例子可看出浮动元素的浮动性质会对其他元素造成影响,此时我们需要清除浮动,才能去除浮动对后面的元素影响。
我们可以在将body内改为:
<body>
<div class="box1">浮动元素1</div>
<div class="box2">浮动元素2</div>
<div style="clear:left"></div>
<div>文档</div>
</body>
运行后可以看到结果:
HTML中为什么要清除浮动的个人理解 - 如履薄冰 - 如履薄冰
此时非浮动元素则正常显示。
 
  评论这张
 
阅读(4)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

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

页脚

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