【BFC盒子】07

BFC

文章目录

    • BFC
      • 1. 自适应两栏式布局
      • 2. 防止外边距折叠
      • 3. 问题

  1. BFC(Block fomatting context)即"块级格式化上下文"。是一个独立的渲染区域,它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。
  2. Box是CSS布局的对象和基本单位,不同类型的Box,会参与不同的Formatting Context(一个决定如何渲染文档的容器),因此Box内的元素会以不同的方式渲染。
    • display 属性为 block, list-item, table 的元素,会生成 block-level box。并且会参与 block fomatting context;(简称BFC)
    • display 属性为 inline, inline-block, inline-table 的元素,会生成 inline-level box。并且会参与 inline formatting context(简称IFC)
  3. BFC布局规则:
    • 内部的Box会在垂直方向,一个接一个地放置。
    • Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠 【外边距折叠】
    • 每个元素的margin box的左边, 与包含块border box的左边相接触(对于从左往右的格式化,否则相反)。即使存在浮动也是如此。
    • BFC的区域不会与float box重叠。
    • BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。
    • 计算BFC的高度时,浮动元素也参与计算。
  4. 它是页面中的一块渲染区域,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用。
  5. 哪些元素会变成BFC区域
    • HTML根元素
    • float属性不为none
    • position属性值为absolute或fixed
    • display属性为inline-block, table-caption, flex, inline-flex
    • overflow属性不为visible(~不做处理)。
  6. BFC的用法:
    • 自适应两栏布局:利用BFC不会与浮动元素重叠思路
    • 闭合浮动:将父元素设置为1个BFC
    • 防止垂直 margin 重叠:让2个相邻的元素处于2个不同的BFC中
  7. calc()函数。用于动态计算长度值。width: calc(100% - 10px)

1. 自适应两栏式布局

  • overflow:hidden;变为BFC盒子

    .wrap{
        /* 宽度为父元素body的50% */
        width: 50%;
        border: 1px #000 solid;
        margin: 0 auto;
    }
    /* 左边区域 */
    .left{
        width: 200px;
        height: 400px;
        background-color: red;
        float: left;
    }
    /* 右边区域 */
    .right{
        /* 溢出隐藏,将盒子变为BFC盒子 */
        overflow: hidden;
    
        height: 500px;
        background-color: royalblue;
    }
    
    <div class="wrap">
        <div class="left">自适应两栏式布局——左半部分div>
        <div class="right">自适应两栏式布局——右半部分div>
    div>
    

    【BFC盒子】07_第1张图片


  • calc()函数 实现自适应两栏式布局

    .wrap{
        width: 50%;
        border: 1px solid black;
        margin: 0 auto;
        /* 清除浮动 */
        overflow: hidden;
    }
    .left{
        width: 200px;
        height: 200px;
        background-color: chocolate;
        float: left;
    }
    .right{
        /* 注意空格 */
        width: calc(100% - 200px);
        height: 500px;
        background-color: cornflowerblue;
        /* 将该盒子编程BFC盒子 */
        float: left;
    }
    

2. 防止外边距折叠

.box{
    width: 200px;
    height: 200px;
    background-color: crimson;
    margin: 20px 0;
}
.bfc{
    overflow: hidden;
}
<div class="box">div>
<div class="bfc">
    <div class="box">div>
div>

3. 问题

将一个有浮动子元素的父元素的float设置为left,是否可以闭合浮动,为什么?

答:不会使用该方法闭合浮动。


你可能感兴趣的:(Web前端,CSS样式,css3,css,前端,BFC盒子)