zoukankan      html  css  js  c++  java
  • bfc

    BFC(Block formatting context) 直译为‘块级格式化上下文’。它是一个独立的渲染区域。并且有它自己一套布局规则,在这块区域内生成BFC来改变样式。BFC内部的元素和外面的元素互不影响。

      BFC的布局规则:

             1.内部的Box会在垂直方向,一个接一个地放置。

             2.Box垂直方向的距离要由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠

             3.每个元素的margin box的左边,与包含块border box 的左边向相接触(对于从左往右的格式化,否则相反)。即使在浮动也是如此

             4.BFC的区域不会与float box重叠

             5.BFC就是页面上的一个隔离的独立容器,容器里面子元素不会影响到外面的元素。反之也如此

             6.计算BFC的高度时,浮动元素也参与 计算

      哪些元素会生成BFC:

             1.根元素

             2.float属性为none

             3.position为absolute或fixed

             4.display为inline-block,table-cell,table-caption,flex,inline-flex

             5.overflow不为visible

      BFC的作用:

             1.自适应的两栏布局

             2.清除浮动

             3.防止margin重叠

    ??????????????????????????????????????????????????????????????????????????????????????????????????????????????

  • 相关阅读:
    BZOJ1787 [Ahoi2008]Meet 紧急集合[结论题]
    poj3728 The merchant[倍增]
    poj2750 Potted Flower[线段树]
    poj2482 Stars in Your Window[扫描线]
    poj2182 Lost Cows[BIT二分]
    UVA12096 The SetStack Computer
    第05组(65) 需求分析报告
    团队介绍与选题报告
    数据采集技术第三次作业
    结对编程作业
  • 原文地址:https://www.cnblogs.com/menggege/p/14128713.html
Copyright © 2011-2022 走看看