bfc的理解和作用

html&css

发布日期: 2021-12-31

文章字数: 352

阅读时长: 1 分

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .float,
        .normal {
            background-color: pink;
            width: 100px;
            height: 100px;
            margin-right: 10px;

        }

        .float {
            float: left;
            /* 浮动会脱离文档流  使其它元素重新排列*/
        }

        .normal {
            background-color: violet;
        }

        .bfc {
            /* display: flex; */
            /* position: absolute; */
            /* float: left; */
            overflow: auto;
        }

        /* 触发条件：
        float：left|right;  不是none
        overflow:hidden|scroll|auto 不是visible
        display:inline-block | table-cell |table-caption|flex|grid; 不是block none inline
        position:absolute|fixed 非relative */

        /* 概念：BFC是一个封闭的独立空间，使得里面的元素不会影响到外边 
        作用：常用来解决浮动（见2）、margin重合（见1）、
        使用：添加一个父标签，设置如上属性 */

        /* 1、margin重合：外边距的重叠只产生在普通流文档的上下外边距之间， 只有 块元素 会发生外边距重叠，行内元素 和 行内块元素 都不会发生外边距重叠问题 
        有两种情况：一、相邻兄弟元素的marin-bottom和margin-top的值发生重叠；二、父级和第一个/最后一个子元素的margin合并*/

        /* 2、float会脱离文档流，会导致无法给float元素设置边框、影响非浮动元素的情况 */
    </style>
</head>

<body>

    <div class="bfc">
        <div class="float"></div>
    </div>

    <div class="normal"></div>




</body>

</html>