BFC-边距重叠解决方案

Posted 2021-03-11 antyhouse

emmm~总结下

 <div>
        1. BFC的基本概念
            块级格式化上下文
        
        2.BFC的原理---可以将BFC看成一个封闭的大箱子,箱子里面不影响外面,外面不影响里面
            2.1 同一个bfc下外边距方向会发生重叠---解决上下块级元素margin重叠问题
            2.2 bfc创建的区域不会与浮动元素的box重叠,-----可以应用在左右布局上,清除浮动
            2.3 BFC是一个独立的元素,外面的元素不会影响里面的元素,里面的元素不会影响外面的元素
            2.4 计算bfc高度的时候,浮动元素也会往里面计算 --子元素是浮动元素,高度可以给创建了BFC的父元素
        
        3. 如果创建BFC(习惯用的比较多的--overflow:hidden /auto , position:absolute, float:left
            3.1  float属性不为none
            3.2 position不为static和relative
            3.3  overflow不为visible
            3.4  display为inline-block, table-cell, table-caption, flex, inline-flex
    </div>

4.应用实例
4.1BFC垂直方向边距重叠--非常重要

<div class="main_box">
        <div class="top_section">1</div>
         <!-- 下面的overflow: hidden;解决了边距重叠     -->
        <div style="overflow:auto">
            <div class="middle_section">
                2
            </div>
        </div>
        <div class="bottom_section">3</div>
    </div>
    <style>
        /* 边距重叠的原则,两个margin,取最大的一个 */
        /* 解决方法: 在重叠的元素上面,加上一个父元素,父亲元素加上overflow:hidden ,父元素创建一个bfc*/
        html * {
            margin: 0;
            padding: 0;
        }
        .main_box {
            background: pink;
            overflow: hidden;
        }
        .top_section, .middle_section, .bottom_section{
            background: yellow;
            margin: 10px auto 25px;
        }
    </style>

4.2 子元素float,也不影响父元素的高度计算

 <!-- 子元素是float,也会让父元素参与进来 -->
    <div class="father_section">
        <div class="son_section">
            我是子元素
        </div>
    </div>
    <style>
        /* bfc渲染元素的时候,会考虑子元素float,换句话说,子元素float,也不影响父元素的高度计算 */
        /* bfc可以清除浮动 */

        .father_section {
            background: red;
            /* 下面的三种方法都可以创建BFC */
            /* overflow: auto; */
            /* overflow: hidden; */
            float: left; 
            /* 前面3个都可以创建BFC */
        }
        .son_section {
            float: left; 
        }
    </style>

4.3 bfc不与float元素重叠---清除浮动的应用以及可以完成左右布局

    .main_box {
            background: yellow;
        }
        .left_section {
            width: 200px;
            float: left;
            background: yellow;
        }
        .right_section {
            background: red;
            height: 100px;
            /* 下面给右边的元素创建一个BFC, BFC的元素不会与float元素相互重叠 */
            overflow: auto;       
        }

4.4 父元素的高度,在父元素没有创建bfc时，是100px,创建了是120px---实际应用性不强

 .main_box {
            background: yellow;
        }
        .left_section {
            width: 200px;
            float: left;
            background: yellow;
        }
        .right_section {
            background: red;
            height: 100px;
            /* 下面给右边的元素创建一个BFC, BFC的元素不会与float元素相互重叠 */
            overflow: auto;       
        }