• 浮动(clear)


    浮动:浮动的框可以左右移动,直至它的外边缘遇到包含框或者另一个浮动框的边缘。浮动框不属于文档中的普通流,当一个元素浮动之后,不会影响到块级框的布局而只会影响内联框(通常是文本)的排列,文档中的普通流就会表现得和浮动框不存在一样,当浮动框高度超出包含框的时候,也就会出现包含框不会自动伸高来闭合浮动元素(“高度塌陷”现象)。顾名思义,就是漂浮于普通流之上,像浮云一样,但是只能左右浮动。

    从各个方面比较,after伪元素闭合浮动无疑是相对比较好的解决方案了,下面详细说说该方法:

    .clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; }

    .clearfix { *zoom:1; }

    1) display:block 使生成的元素以块级元素显示,占满剩余空间;

    2) height:0 避免生成内容破坏原有布局的高度。

    3) visibility:hidden 使生成的内容不可见,并允许可能被生成内容盖住的内容可以进行点击和交互;

    4)通过 content:"."生成内容作为最后一个元素,至于content里面是点还是其他都是可以的,例如oocss里面就有经典的 content:"XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX",有些版本可能content 里面内容为空,一丝冰凉是不推荐这样做的,firefox直到7.0 content:”" 仍然会产生额外的空隙;

    5)zoom:1 触发IE hasLayout。

    通过分析发现,除了clear:both用来闭合浮动的,其他代码无非都是为了隐藏掉content生成的内容,这也就是其他版本的闭合浮动为什么会有font-size:0,line-height:0。

    精益求精方案一:

    相对于空标签闭合浮动的方法代码似乎还是有些冗余,通过查询发现Unicode字符里有一个“零宽度空格”,也就是U+200B ,这个字符本身是不可见的,所以我们完全可以省略掉 visibility:hidden了

    .clearfix:after {content:"200B"; display:block; height:0; clear:both; }

    .clearfix { *zoom:1; }.

    精益求精方案二:

    由Nicolas Gallagher 大湿提出来的,原文:A new micro clearfix hack,该方法也不存在firefox中空隙的问题。

    /* For modern browsers */

    .cf:before,.cf:after {

    content:"";

    display:table;

    }

    .cf:after { clear:both; }/* For IE 6/7 (trigger hasLayout) */

    .cf { zoom:1; }

     需要注意的是:

    上面的方法用到了  :before伪元素,很多人对这个有些迷惑,到底我什么时候需要用before呢?为什么方案一没有呢?其实它是用来处理margin边距重叠的,由于内部元素 float 创建了BFC,导致内部元素的margin-top和 上一个盒子的margin-bottom 发生叠加。如果这不是你所希望的,那么就可以加上before,如果只是单纯的闭合浮动,after就够了!并不是如同大漠《Clear Float》一文所说的:但只使用clearfix:after时在跨浏览器兼容问题会存在一个垂直边距叠加的bug,这不是bug,是BFC应该有的特性。

    边距叠加测试.jpg

    此时此刻的我,对浮动依旧不了解,前端世界依旧很庞大,我要去追寻

    清浮动
    1.给父级也加浮动


    2.给父级加display:inline-block


    3.在浮动元素下加<div class="clear"></div>

    .clear{ height:0px;font-size:0;clear:both;

    4.在浮动元素下加<br clear="all"/>


    5. 给浮动元素的父级加{zoom:1;}
    :after{content:""; display:block;clear:both;}

    6.Overflow:auto 溢出显示滚动条,也是具有浮动效果,对浮动元素父级添加;


    **在IE6,7下浮动元素的父级有宽度就不用清浮动

    haslayout 根据元素内容的大小 或者父级的父级的大小来重新的计算元素的宽高

    display: inline-block
    height: (任何值除了auto)
    float: (left 或 right)
    (任何值除了auto)
    zoom: (除 normal 外任意值)

    clear属性只能在块级元素中添加,在内联元素中没有用;

  • 相关阅读:
    Jmeter 之 上传下载文件
    Jmeter 样例 之 JDBC请求-操作MySql数据库
    Jmeter综合运用 之 接口测试
    Jmeter 逻辑控制器 之 Switch Controller
    Jmeter 逻辑控制器 之 吞吐量控制器
    Win10系统,Jmeter 字体调整方法
    Jmeter 逻辑控制器 之 交替控制器
    Jmeter 逻辑控制器 之 Runtime Controller
    Jmeter 逻辑控制器 之 Include Controller
    Jmeter 逻辑控制器 之 ForEach 控制器
  • 原文地址:https://www.cnblogs.com/backpacker-lzf/p/4694202.html
Copyright © 2020-2023  润新知