css拾遗(12)-BFC

作者: 姜治宇 | 来源:发表于2022-04-20 13:01 被阅读0次

css拾遗(12)-BFC
CSS清除浮动的方法
CSS BFC和CSS hack
关于 BFC 的布局应用：清除浮动、文字环绕
快速弄懂 BFC
CSS-BFC的理解
前端面试基础题
前端知识点之谈一谈css盒模型、BFC
CSS中重要的BFC
BFC原理

BFC是块级格式化上下文的意思，全称block formatting context，这是元素自带的属性，可通过overflow来触发它。
BFC里的内容，不会跟外部的元素重叠或者互相影响。如果给元素增加clear属性，它只会清除自身所在BFC内的浮动。
给元素添加以下的任意属性值都会创建BFC。

1、 float: left或right，不为none即可。

2、 overflow:hidden、auto或scroll，不为visible即可。

3、display:flex

4、 position:absolute或position: fixed

看个例子：

1.png

<!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>
        .content{
            max-width:1080px;
            margin: 0 auto;
        }
        .media{
            float:left;
            width:50%;
            padding:10px;
            background-color: lightblue;
            border-radius: 6px;
        }
        .media-image {
            width:200px;
            height:100px;
            float:left;
            margin-right:20px;
        }

    </style>
</head>
<body>
    <div class="content">
        <div class="media">
            <img class="media-image" src="https://img2.doubanio.com/view/note/l/public/p82460871.webp" alt="" />
            <div class="media-body">
                <h4>宫崎骏电影</h4>
                <p>精选宫崎骏经典语录大全 宫崎骏经典语录大全 1、爱,不是寻找一个完美的人,而是学会用完美的眼光欣赏那个不完美的人。 2、不管前方的路有多苦,只要走的方向正确,不管多么崎岖...</p>
            </div>
        </div>
    </div>

</body>
</html>

media容器和里面的图片都设置了浮动，此时文字是环绕在图片周围的，我们希望的是让文字靠右边显示：

2.png

怎么实现呢？
直观上的理解，我们可以清除一下图片底部的浮动，然后让文字右浮动即可。

<!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布局，清除浮动*/
        .clearfix::before,
        .clearfix::after {
            display: table;
            content: " ";
        }

        .clearfix::after {
            clear: both;
        }

        .content {
            max-width: 1080px;
            margin: 0 auto;
        }

        .media {
            float: left;
            width: 50%;
            padding: 10px;
            background-color: lightblue;
            border-radius: 6px;
        }

        .media-image {
            width: 200px;
            height: 100px;
            float: left;
            margin-right: 20px;
        }

        .media-body {

            float: right;

        }
    </style>
</head>

<body>
    <div class="content">
        <div class="media">
            <img class="media-image clearfix" src="https://img2.doubanio.com/view/note/l/public/p82460871.webp" alt="" />
            <div class="media-body">
                <h4>宫崎骏电影</h4>
                <p>精选宫崎骏经典语录大全 宫崎骏经典语录大全 1、爱,不是寻找一个完美的人,而是学会用完美的眼光欣赏那个不完美的人。 2、不管前方的路有多苦,只要走的方向正确,不管多么崎岖...</p>
            </div>
        </div>
    </div>

</body>

</html>

但这样做无法达到目的，发现文字都跑到下面去了：

3.png

我们希望左侧图片和右侧文字之间互不干扰，所以就要用到BFC，将文字区域增加overflow属性，即可达到目的。

<!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>
        .content{
            max-width:1080px;
            margin: 0 auto;
        }
        .media{
            float:left;
            width:50%;
            padding:10px;
            background-color: lightblue;
            border-radius: 6px;
        }
        .media-image {
            width:200px;
            height:100px;
            float:left;
            margin-right:20px;
        }
        .media-body {
            overflow: auto;/*创建BFC*/
        }
    </style>
</head>
<body>
    <div class="content">
        <div class="media">
            <img class="media-image" src="https://img2.doubanio.com/view/note/l/public/p82460871.webp" alt="" />
            <div class="media-body">
                <h4>宫崎骏电影</h4>
                <p>精选宫崎骏经典语录大全 宫崎骏经典语录大全 1、爱,不是寻找一个完美的人,而是学会用完美的眼光欣赏那个不完美的人。 2、不管前方的路有多苦,只要走的方向正确,不管多么崎岖...</p>
            </div>
        </div>
    </div>

</body>
</html>