首页 > Web开发 > 详细

来自张鑫旭大大的《css世界》学习笔记--- about float

时间:2018-08-16 15:32:12      阅读:201      评论:0      收藏:0      [点我收藏+]

6.1 float的本质与特性

浮动的本质是为了实现文字环绕效果

float特性:

  • 包裹性(eg:父元素宽200px,子元素为宽128px的图片,此时表现出包裹;子元素宽超过200px,则自适应父元素宽度,最终为200px)(包裹自适应两部分组成)
  • 块状化并格式化上下文(块状化:一旦float属性值不为none,其display计算值为block或者table)
  • 破坏文档流
  • 没有任何margin合并

    tips:不要用text-align属性控制浮动元素的左右对齐,对块级元素是无效的。

    float浮动机制:float属性的作用之一就是使父元素高度坍塌(这不是bug)。行框盒子和浮动元素不可重叠(行框盒子如果和浮动元素的垂直高度有重叠,则行框盒子在正常定位状态下只会跟随浮动元素,不会发生重叠)可以看个有趣例子

    6.2 float与流体布局

    借助float特性,可以实现两栏或多栏自适应布局

    一侧定宽的两栏自适应布局:

    eg:.father{
    overflow:hidden;
    }
    .father > img{
    width:60px;
    height:64px;
    float:left;
    }
    .animal{
    margin-left:70px;
    }

    如果宽度不固定,用百分比宽度也ok

    中间居中的左中右布局:

     eg:<div class="box">
         <a href="#" class="prev">上一章</a>
         <a href="#" class="next">下一章</a>
         <h3 class="title">疯狂动物城</h3>
       </div>
        .prev{float:left;}
        .next{float:right;}
        .title{margin:0 70px;text-align:center;}

    6.3 clear属性

    元素盒子的边不能和前面的浮动元素相邻

    tips:凡是用clear:left或clear:right的地方均可以用clear:both替换(clear对"后面的"浮动元素是不闻不问的)

    clear属性只有块级元素才有效,因此在使用::after清除浮动时要设置display

      .clear{
            content="";
            display:table(也可以是block/list-item);
            clear:both;
            }

    6.4 BFC

    block formatting context 块级格式化上下文

    内部子元素不会影响到外部的元素

    触发BFC的情况:

  • 根元素
  • float的值不为none
  • overflow的值为auto,scroll,hidden
  • display的值为table-cell、table-caption、inline-block中的任意一个
  • position的值不为relative和static

    元素符合上面任意一个条件,无需使用clear:both清除浮动

    普通流体元素在设置了overflow:hidden后,会自动填满容器中除浮动元素以外的剩余空间,形成自适应布局效果

    与基于纯流体特性实现的两栏或多栏布局相比,基于BFC布局的优点:1)自适应内容由于封闭而更健壮,容错性更强 2)自适应内容自动填满浮动以外区域,无需关心浮动元素宽度

    能担任自适应布局重任的:

  • overflow:auto/hidden,适用IE7以上版本
  • display:inline-block,适用于IE6和IE7
  • display:table-cell,适用于IE8及以上版本

    6.5 overflow与锚点定位

    实现锚点跳转方法:1)a标签以及name属性 2)利用标签的id属性

    锚点定位的触发条件:1)URL地址中的锚链与锚点元素对应并有交互行为 2)可focus的锚点元素处于focus状态

    锚点定位的本质是改变了scrollTop或scrollLeft的值

    使用锚点定位来实现选项卡切换效果 戳这里 不足之处:1)容器高度需要固定 2)"由内而外"的锚点定位会触发窗体的重定位,若页面也是可以滚动的,则点击按钮后页面会发生跳动

    使用"focus"锚点定位 戳这里 通过for属性与input输入框的id相关联,点击按钮触发输入框的focus行为,触发锚点定位。 实际项目里还需用到JS,处理列表部分区域在浏览器外面时依然跳动的问题

     $("label.click").removeAttr("for").on("click",function(){
        $(".box").scrollTop(xxx);
       )};

来自张鑫旭大大的《css世界》学习笔记--- about float

原文:https://www.cnblogs.com/helen-papa/p/9487296.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!