zoukankan      html  css  js  c++  java
  • 高级布局 浮动 清浮动

    文档流(normal flow)
    # BFC(Block fromatting context):
    # 块级格式化上下文,它是一个独立的渲染区域,只有Block-level box参与,它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干.

    # BFC规则:
    # 1.内部的Box会在垂直方向,一个接一个的放置;
    # 2.box自身垂直方向的位置由margin-top决定,属于同一个相邻Box的margin会发生重叠;
    # 3.Box自身水平方向的位置由margin左或右决定(具体依据:参照BFC方位),属于同一个BFC的两个相邻Box的margin会发生叠加.

    # 浮动布局
    # float: 浮动布局,改变BFC的参照方位
    # 为什么要使用:使用它,块级盒就会同行显示
    # float:left | right; 左|右 浮动
    # left : BFC参照方向从左向右
    # right : BFC参照方向从右向左
    #
    # 浮动的区域有父级的width决定

    # 清浮动
    # 清浮动:
    # 浮动问题:子集浮动了,不再撑开父级的高度,那么父级如果拥有兄弟标签,可能会出现布局重叠问题
    # 清浮动:解决上面的问题,通过使父级获取一个合适高度,这样子集就不会和父级的兄弟布局发生重叠
    # clear: left|right|both
    # 1.设置父级的死高度
    # 2.通过兄弟设置 chear:both
    # 3.设置父级overflow属性
    # .sub{
    # overflow:hidden;
    # }
    # 4.通过父级:after伪类
    # .sup:after{
    # content:"";
    # display:block;
    # clear:both;
    # }
  • 相关阅读:
    用C#编写获取远程IP,MAC的方法
    创建 TransactSQL 作业步骤
    S3C2440系统时钟
    C# 跟年月日判断星期几
    嵌入式系统启动例程
    使用HTML5和CSS3来创建幻灯片
    巧解Android时区加载过慢的问题
    HTML5之美
    C#如何取硬件标志
    S3C2440看门狗定时器(Watchdog)
  • 原文地址:https://www.cnblogs.com/yanhui1995/p/10125579.html
Copyright © 2011-2022 走看看