BFC简述

一、什么是BFC?

BFC(块级格式化上下文),它是一个独立渲染区域,它的内部布局不受外部元素的影响。

二、BFC的布局规则

  • 内部的盒子会在垂直方向上一个接一个放置。
  • 每个元素的左外边距都会与包含块的左边界相接。
  • 同一个BFC中的两个盒子margin会发生重叠,不论方向。
  • BFC区域不会与float元素发生重叠。
  • 计算BFC高度时,浮动子元素也参与计算。
  • BFC是一个独立区域,内外不互相影响。

三、BFC触发条件

  • float不为none
  • overflow不为visible
  • position不为static和relative
  • display为inline-block,table-cell,flex,inline-flex

四、应用场景

1.避免margin重叠

 <style>
         p {
        color: #f55;
        background: #fcc;
        width: 200px;
        line-height: 100px;
        text-align:center;
        margin: 100px;
    }
    </style>
</head>
<body>
        <p>1</p >
        <p>2</p >

</body>

BFC简述_第1张图片
上图可看出同一个BFC中的元素发生了margin折叠,所以我们需要将其中一个元素用div包起来,使其形成一个新的BFC。

<style>
        .all{
          overflow: hidden;  
        }
         p {
        color: #f55;
        background: #fcc;
        width: 200px;
        line-height: 100px;
        text-align:center;
        margin: 100px;
    }
    </style>
</head>
<body>
        <p>1</p >
        <div class="all">
            <p>2</p>
        </div>

</body>

BFC简述_第2张图片

2.清除浮动

   <style>
        .par {
        border: 5px solid rgb(145, 0, 0);
        width: 300px;
    }
 
    .child {
        border: 5px solid rgb(38, 168, 219);
        width:100px;
        height: 100px;
        float: left;
    }
    </style>
</head>
<body>
    <div class="par">
        <div class="child"></div>
        <div class="child"></div>
    </div>

</body>

BFC简述_第3张图片
因为BFC在计算高度时,浮动元素也会参与,所以将父元素设为一个单独的BFC。

<style>
        .par {
        border: 5px solid rgb(145, 0, 0);
        width: 300px;
        overflow: hidden;
    }
 
    .child {
        border: 5px solid rgb(38, 168, 219);
        width:100px;
        height: 100px;
        float: left;
    }
    </style>
</head>
<body>
    <div class="par">
        <div class="child"></div>
        <div class="child"></div>
    </div>

</body>

BFC简述_第4张图片

3.实现自适应布局

 <style>
         body {
        width: 300px;
        position: relative;
    }
 
    .aside {
        width: 100px;
        height: 150px;
        float: left;
        background: #f66;
    }
 
    .main {
        height: 200px;
        background: #fcc;
    }
    </style>
</head>
<body>
    <div class="aside"></div>
    <div class="main"></div>
</body>

BFC简述_第5张图片
每个元素的左外边距与包含块的左边界相接触,因此我们需要触发main元素生成新的BFC。

 .main {
        height: 200px;
        background: #fcc;
        overflow: hidden;
    }

这时候,新的BFC不会与浮动的.aside元素重叠。因此会根据包含块的宽度,和.aside的宽度,自动变窄
BFC简述_第6张图片

你可能感兴趣的:(javascript,css,css3)