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

梦幻雪冰

技在手,能在身,思在脑,从容过生活——陈能堡

 
 
 

日志

 
 

【转载】浮动元素有何性质  

2015-01-25 19:38:54|  分类: HTML&&CSS |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
本文转载自独行冰海《浮动元素有何性质》

浮动元素的性质

  1. 浮动元素会脱离正常的文档流,按照其外边距指定的位置相对于它的上一个块级元素(或父元素)显示
  2. 浮动元素后面的块级元素的内容会向此浮动元素的外边距靠齐,但是边框和背景却忽略浮动元素而向上一个(实例中为父元素)任意非浮动元素靠齐
  3. 浮动元素后面的内联元素会向此浮动元素的外边距靠齐

浮动元素会脱离正常的文档流,按照其外边距指定的位置相对于它的上一个块级元素(或父元素)显示

<!DOCTYPE HTML >
<html>
<head>
<meta charset='utf-8'/>
<title>浮动元素的性质</title>
<meta author = '独行冰海'/>
<style type="text/css">
*{margin:0;padding:0;}
.box{width: 400px;height: 200px;padding: 50px;margin: 50px;background: #ccf;}
.inner{width: 100px;height: 100px;background: #fcc;}
</style>
</head>
<body>
<div class='box'>
<div class='inner'>浮动元素</div>
</div>
</body>
</html>

浮动元素有何性质 - 独行冰海 - 独行冰海
 

浮动元素后面的块级元素的内容会向此浮动元素的外边距靠齐,但是边框和背景却忽略浮动元素而向上一个(实例中为父元素)任意非浮动元素靠齐

<!DOCTYPE HTML >
<html>
<head>
<meta charset='utf-8'/>
<title>浮动元素的性质</title>
<meta author = '独行冰海'/>
<style type="text/css">
*{margin:0;padding:0;}
.box{width: 400px;height: 200px;padding: 50px;margin: 50px;background: #ccf;}
.inner{width: 100px;height: 100px;background: #fcc;float: left;}
.notfloat{width: 200px;height: 100px;background: #cfc;}
</style>
</head>
<body>
<div class='box'>
<div class='inner'>浮动元素</div>
<div class='notfloat'>浮动元素后面的块级元素的内容会向此浮动元素的外边距靠齐。边框和背景却忽略浮动元素而向上一个(下面例子中为父元素)任意非浮动元素靠齐</div>
</div>
</body>
</html>

浮动元素有何性质 - 独行冰海 - 独行冰海

<!DOCTYPE HTML >
<html>
<head>
<meta charset='utf-8'/>
<title>浮动元素的性质</title>
<meta author = '独行冰海'/>
<style type="text/css">
*{margin:0;padding:0;}
.box{width: 400px;height: 200px;padding: 50px;margin: 50px;background: #ccf;}
.inner{width: 100px;height: 100px;background: #fcc;float: left;}
.notfloat{width: 200px;height: 100px;background: #cfc;}
</style>
</head>
<body>
<div class='box'>
<div class='notfloat'>非浮动元素</div>
<div class='inner'>浮动元素</div>
<div class='notfloat'>浮动元素后面的块级元素的内容会向此浮动元素的外边距靠齐。边框和背景却忽略浮动元素而向上一个(下图中为最上面的一个兄弟级别元素)任意非浮动元素靠齐</div>
</div>
</body>
</html>

浮动元素有何性质 - 独行冰海 - 独行冰海

浮动元素后面的内联元素会向此浮动元素的外边距靠齐

<!DOCTYPE HTML >
<html>
<head>
<meta charset='utf-8'/>
<title>浮动元素的性质</title>
<meta author = '独行冰海'/>
<style type="text/css">
*{margin:0;padding:0;}
.box{width: 400px;height: 200px;padding: 50px;margin: 50px;background: #ccf;}
.inner{width: 100px;height: 100px;background: #fcc;float: left;}
.notfloat{background: #cfc;}
</style>
</head>
<body>
<div class='box'>
<div class='inner'>浮动元素</div>
<span class='notfloat'>浮动元素后面的内联元素会向此浮动元素的外边距靠齐</span>
</div>
</body>
</html>

浮动元素有何性质 - 独行冰海 - 独行冰海

注意:元素设置为浮动之后,就生成一个块级框(css行高提出的概念),没必要再声明display:block,可以设置宽高!!!
更多CSS浮动效果可以点击此处查看:
  评论这张
 
阅读(69)| 评论(0)
推荐 转载

历史上的今天

评论

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

页脚

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