BFC布局详解-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_44169219/article/details/102678668

一、触发BFC的方式，列举几种常用情况

根元素<html>
浮动元素（float不为none）
绝对定位元素（position : fixed / absolute）
非块元素（display:inline-block / table-cell / table-caption / flex / inline-flex）
块元素（overflow不为visible）

二、BFC的约束规则

内部的box会在垂直方向上一个接一个的放
属于同一个BFC内的两个相邻box的margin会发生重叠
BFC中子元素不会超过不会超出它的包含块，position为absolute的元素可以超出它的包含块边界
浮动子元素参与BFC高度的计算
BFC的区域不会与浮动元素的区域重叠
BFC是一个独立的容器，其中的子元素与外部元素互不影响

三、BFC的应用

1.清除浮动

<div class="f">
    <div class="s">子元素</div>
</div>

<style>
    .f{
        width:100px;
        border:3px solid red;
    }
   .s{
        width:50px;
        height:50px;
        float:left;
        background-color:green;
    }
</style>

解决办法：给父元素设置：overflow:hidden

2. 防止margin重叠塌陷

<div class="f">
    <div class="s1"></div>
    <div class="s2"></div>
</div>

<style>
    .f{
        width: 220px;
        border: 3px solid black;
    }
    .s1,.s2{
        width: 200px;
        height: 100px;
        background-color: pink;
        margin-bottom: 100px;
    }
    .s2{
        margin-top: 100px;
    }
</style>

解决办法：给其中一个子元素包裹一层容器并设置：overflow:hidden

上面这个例子是垂直方向的布局，水平方向也有可能会出现相同的问题，这时候触发BFC仍然是可以有效解决的。即每一个“框”都可以设置display : inline-block，从而避免margin的重叠。总之，对于margin塌陷的情况，都可以利用BFC规则来解决。

3.两栏布局

<div class="block">
    <div class="left"></div>
    <div class="right">我这里面有好多字呢：滋滋滋滋滋滋滋滋滋滋滋滋滋滋滋滋滋滋滋滋滋滋滋滋</div>
</div>

<style>
    .block{
        width: 200px;
    }
    .left{
        width: 100px;
        height: 50px;
        background-color: red;
        float: left;
    }
    .right{
        background-color: green;
    }
</style>

解决办法：给右边元素设置：overflow:hidden

4.防止元素被浮动元素覆盖

<div class="left"></div>
<div class="right"></div>

<style>
    .left{
        width: 100px;
        height: 100px;
        background-color: red;
        float: left;
    }
    .right{
        width: 100px;
        height: 100px;
        background-color: green;
    }
</style>

解决办法：给右边元素设置overflow：hidden