BFC

来源：互联网发布：c51单片机的最小系统图编辑：程序博客网时间：2024/06/04 17:58

一、BFC 定义：

BFC(Block formatting context)直译为”块级格式化上下文”，它是一个独立的渲染区域。

二、BFC布局规则：

        （1）内部的Box会在垂直方向，一个接一个地放置。（2）Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠（3）每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。（4）BFC的区域不会与float box重叠。（5）BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。（6）计算BFC的高度时，浮动元素也参与计算

三、哪些元素会生成BFC?

        根元素float属性不为noneposition为absolute或fixeddisplay为inline-block, table-cell, table-caption, flex,  inline-flex

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title></title>        <style type="text/css">            /*做一个侧边栏目但是被包含了*/            .aside {                  width: 100px;                  height: 150px;                  float: left;                  background: #f66;              }              .main {                  height: 200px;                  background: #fcc;                /*overflow: hidden;*/              }            /*经典的上边距重叠问题*/           .box{                  background-color: darkgrey;                  width: 700px;                  overflow: hidden;            }              .first{                  margin-top: 100px;                  width: 50px;                  height: 50px;                  background-color: #000000;              }              .second{                  width: 50px;                  height: 50px;                  background-color: blue;              }              /*float之后的元素没有撑开我们的盒子，而我们的原则，计算BFC的高度时，浮动元素也参与计算*/            .par{                      border: 5px solid #fcc;                      width: 300px;                      /*display: inline-block;*/                   overflow: hidden;                }              .child{                      border: 5px solid #f66;                      width:100px;                      height: 100px;                      float: left;                 }        </style>    </head>    <body>        <!--<div class="aside"></div>          <div class="main"></div>    -->        <!--<div class="box">              <div class="first"></div>             <div class="second"></div>          </div>  -->        <div class="par">              <div class="child"></div>              <div class="child"></div>          </div>      </body></html>

阅读全文

0 0