守望者--AIR技术交流

 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,访问微社区

搜索
热搜: ANE FlasCC 炼金术
查看: 1214|回复: 0

[技术资料] 你真的懂float吗

[复制链接]
  • TA的每日心情
    擦汗
    2018-4-10 15:18
  • 签到天数: 447 天

    [LV.9]以坛为家II

    1742

    主题

    2094

    帖子

    13万

    积分

    超级版主

    Rank: 18Rank: 18Rank: 18Rank: 18Rank: 18

    威望
    562
    贡献
    29
    金币
    52619
    钢镚
    1422

    开源英雄守望者

    发表于 2016-8-15 14:28:53 | 显示全部楼层 |阅读模式

    你真的懂float吗?

    前言

    相信很多人都用过float属性,也知道float是干嘛的,但是在实际项目中有时候用起来往往不是想象中的结果,或者对为什么出现这样的结果不理解。
    现在我也来浅谈一下float相关的事情,
    请大家不要吐槽,积极给予我掌声,我会表面拒绝的,然后内心欣然接受你们的掌声。

    属性列表

    float有四个属性,具体属性的意思我就不说了,不懂的通过传送门去查看:传送门

    .xxx {
      float: left | right | inherit | none
    }
    

    浮动元素显示规则

    1、对于它的父元素来说,浮动元素是不存在的

    一个元素如果仅仅有一个浮动元素为子元素的话,父元素的宽高会收起来(浮动元素不会撑起父元素的宽高):

    例子1-1:

    .parent {
       position: relative;
       padding: 10px;
     }
     .child {
       float: left 
     }
    

    2、一个浮动元素的位置会尽可能的靠近他父元素的左上角或者右上角

    float: left的元素会尽量靠近父元素的左上角
    float: right的元素会尽量靠近父元素的右上角
    例子2-1:

    3、 浮动元素前面定义的元素会把浮动元素挤到下面

    尽管浮动元素会尽可能的靠近父元素的左上角或者右上角(规则2),但是如果浮动元素前面有相邻元素的话,不管是inline(宽度大于父元素的时候)的或者block的,都会把浮动元素挤到下面。

    例子3-1:浮动元素前面无元素的情况:

    例子3-2:浮动元素前面有元素的情况:

    4、先声明的浮动元素有优先靠近父元素左上角或者右上角(规则2)位置的权利

    如果一个父元素有多个浮动子元素,前面声明的浮动元素会更靠近父元素的左上角或者右上角

    例子4-1:有三个浮动子元素的情况

    <div class="container">
        <div class="right">1</div>
        <div class="right">2</div>
        <div class="right">3</div>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
    </div>
    

    5、规则2的拓展

    如果有多个相同方向的浮动元素,浮动元素也会尽可能的靠近左上角或者右上角,直到父元素宽度没法放下这个元素的时候,这个元素才会被挤下去。
    例子5-1: 

    6、inline元素添加浮动属性会拥有block特性

    可以添加宽高等。

    7、浮动元素不会跑出父元素的边界

    这里是相对来说的,float:left元素不会跑出到父元素左边界的外面,不像position: absolute元素可以跑到父元素的外面。

    例子7-1: 

    8、clear(清除浮动)扩展阅读

    clear属性的详解:传送门


    来源:http://div.io/topic/1278

    守望者AIR技术交流社区(www.airmyth.com)
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    
    关闭

    站长推荐上一条 /4 下一条

    QQ|手机版|Archiver|网站地图|小黑屋|守望者 ( 京ICP备14061876号

    GMT+8, 2024-3-28 22:12 , Processed in 0.045155 second(s), 33 queries .

    守望者AIR

    守望者AIR技术交流社区

    本站成立于 2014年12月31日

    快速回复 返回顶部 返回列表