网易 
新闻 LOFTER 邮箱 相册 阅读 图书 有道 摄影 企业邮箱 优惠券 云笔记 闪电邮 邮箱大师 印像派 考拉海购
 
更多
博客 
手机博客 博客搬家 博客VIP服务 发现 小组 风格
 
群博客 博客油菜地 博客话题 博客热点 博客圈子 找朋友
 
登录  
 加关注
   显示下一条  |  关闭
温馨提示！由于新浪微博认证机制调整，您的新浪微博帐号绑定已过期，请重新绑定！立即重新绑定新浪微博》  |  关闭

尹小芃槑

<!DOCTYPE HTML>

导航

 
 
 
 
 

日志

 
 
关于我
尹小芃槑
文章分类

浮动元素有何性质  

2013-08-06 14:34:09|  分类： HTML |  标签： |举报 |字号大中小 订阅

  下载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浮动效果可以点击此处查看：
  评论这张
 
阅读(117)| 评论(0)

历史上的今天

评论

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

页脚

我的照片书 - 手机博客 - 下载LOFTER APP - 订阅此博客

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