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;
    # }
  • 相关阅读:
    线程中死锁的demo
    发布.net core程序碰到的问题
    .net core Identity学习(三) 第三方认证接入
    .net Identity学习(二)OAuth
    .net core Identity学习(一)注册登录
    Git常用操作
    log4net使用
    c#中的Quartz
    jquery中的deferred
    .net core应用部署在IIS上
  • 原文地址:https://www.cnblogs.com/yanhui1995/p/10125579.html
Copyright © 2011-2022 走看看