前端面试知识点(五)--- BFC的创建和作用

如何创建BFC

1、float的值不是none。
2、position的值不是static或者relative。
3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex
4、overflow的值不是visible

BFC的作用

  1. 利用BFC避免margin重叠。
    一起来看一个例子:

    <style>
        *{
           
            margin: 0;
            padding: 0;
        }
        p {
           
            color: #f55;
            background: yellow;
            width: 200px;
            line-height: 100px;
            text-align:center;
            margin: 30px;
        }
    </style>
    <body>
        <p>看看我的 margin是多少</p>
        <p>看看我的 margin是多少</p>
    </body>
    

    页面效果如下:前端面试知识点(五)--- BFC的创建和作用_第1张图片
    我们会发现,p标签垂直方向的margin重合了,因为属于同一个BFC的两个相邻的Box会发生margin重叠
    解决方法:我们可以让把第二个p用div包起来,然后激活它使其成为一个BFC

    <style>
        *{
           
            margin: 0;
            padding: 0;
        }
        p {
           
            color: #f55;
            background: yellow;
            width: 200px;
            line-height: 100px;
            text-align:center;
            margin: 30px;
        }
        div{
           
            overflow: hidden;
        }
    </style>
    <body>
        <p>看看我的 margin是多少</p>
        <div>
            <p>看看我的 margin是多少</p>
        </div>
    </body>
    

    页面效果如下:前端面试知识点(五)--- BFC的创建和作用_第2张图片

  2. 解决兄弟盒子间因浮动产生的遮盖问题

    <style>
        *{
           
            margin: 0;
            padding: 0;
        }
        body {
           
            width: 100%;
            position: relative;
        }
        .left {
           
            width: 100px;
            height: 150px;
            float: left;
            background: rgb(139, 214, 78);
            font-size: 20px;
        }
        .right {
           
            height: 300px;
            background: rgb(170, 54, 236);
            font-size: 40px;
        }
    </style>
    <body>
        <div class="left">LEFT</div>
        <div class="right">RIGHT</div>
    </body>
    

    页面效果如下:前端面试知识点(五)--- BFC的创建和作用_第3张图片
    我们发现当左边的盒子设置浮动后,右边的盒子被遮盖了,为了解决这个问题,我们让right盒子成为一个单独的BFC

    .right {
           
    	overflow: hidden; //创建BFC
        height: 300px;
        background: rgb(170, 54, 236);
        font-size: 40px;
    }
    

    页面效果如下:前端面试知识点(五)--- BFC的创建和作用_第4张图片

  3. 解决父元素因子元素浮动产生的高度塌陷问题(清除浮动)

你可能感兴趣的:(前端面试题汇总,css,css3,前端)