HTML5教程

前端学习-BFC的作用

本文主要是介绍前端学习-BFC的作用，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

<!DOCTYPE html>

<html lang="zh">

<head>

    <link rel="stylesheet" href="../css/reset.css">

    <meta charset="UTF-8">

    <title>Document</title>

    <style>

        .box {

            width: 100px;

            height: 50px;

            background-color: blue;

            float: left;

        }

        .box1 {

            width: 200px;

            height: 200px;

            background-color: red;

            float: left

        }

        .box2 {

            background-color: rgb(255, 0, 242);

            border: indigo 20px solid;

            /* BFC块级格式化上下文

            作用：可以让父元素的宽高随子元素的宽高改变而改变

                也会使元素布局独立化不受外界影响

                激活BFC方法有很多种：

                1、float的值不是none。

                2、position的值不是static或者relative。

                3、display的值是inline-block、table-cell、flex、table-caption或者inline-flex

                4、overflow的值不是visible 可以避免高度塌陷

            */

            overflow: hidden;

            overflow: auto;



 

        }

    </style>

</head>

<body>

    <div class="box2">

        <div class="box"></div>

    </div>


 

    <div class="box1"></div>

</body>

</html>

这篇关于前端学习-BFC的作用的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航