47高度塌陷和BFC

最新推荐文章于 2022-04-17 16:13:57 发布

广东码农

最新推荐文章于 2022-04-17 16:13:57 发布

阅读量63

点赞数

分类专栏： html+css 文章标签： css

本文链接：https://blog.csdn.net/quanxiaobai_/article/details/117728127

版权

html+css 专栏收录该内容

82 篇文章 0 订阅

订阅专栏

高度塌陷

正常状态

<!DOCTYPE html>
<html lang="ch">
<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>高度塌陷和BFC</title>
    <style>
        /* 一般父元素盒子的高度我们都不写死，因为我们希望它的大小可以随着内容的增加或者删减而变化*/
        .outer {
            width: 1200px;
            border: 10px red solid;
        }
        .inner {
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner"></div>
    </div>
</body>
</html>

正常状态，父元素大小随子元素（内容）的变化而变化
在这里插入图片描述

子元素浮动后（脱离文档流后），就发生了高度塌陷

<!DOCTYPE html>
<html lang="ch">
<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>高度塌陷和BFC</title>
    <style>
        /* 一般父元素盒子的高度我们都不写死，因为我们希望它的大小可以随着内容的增加或者删减而变化*/
        .outer {
            width: 1200px;
            border: 10px red solid;
        }
        .inner {
            width: 100px;
            height: 100px;
            background-color: blue;
            /* 子元素浮动 */
            float: left;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner"></div>
    </div>
</body>
</html>

高度塌陷就是下面这样，子元素脱离文档流后无法撑起父元素的大小
在这里插入图片描述
发生高度塌陷容易引起整个页面布局的混乱

BFC

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

<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>高度塌陷和BFC</title>
    <style>
        /* 一般父元素盒子的高度我们都不写死，因为我们希望它的大小可以随着内容的增加或者删减而变化*/
        .outer {
            width: 1200px;
            border: 10px red solid;
    
            /* 
            BFC(Block Formatting Context）块级格式化环境
            - BFC是一个css中的一个隐含的属性，可以为一个元素开启BFC
            - 开启BFC该元素会变成一个独立的布局区域
            - 元素开启BFC后的特点:
                1.开启BFc的元素不会被浮动元素所覆盖
                2.开启BFC的元素子元素和父元素外边距不会重叠
                3.开启BFc的元素可以包含浮动的子元素

            - 可以通过一些特殊方式来开启元素的BFC:
                1. 设置元素的浮动；缺点：丢失宽度（不推荐）
                2. 设置元素为行内块元素缺点：丢失宽度（不推荐）
                3. 将元素的overfloat设置为一个非visible的值
                    -常用的方式为元素设置overflow:hidden开启其BFC以使其可以包含浮动元素
             */
            overflow: hidden;
        }

        .inner {
            width: 100px;
            height: 100px;
            background-color: blue;
            float: left;
        }
    </style>
</head>

<body>
    <div class="outer">
        <div class="inner"></div>
    </div>
</body>

</html>

在这里插入图片描述
怎么理解BFC？可以参考这篇文章：https://zhuanlan.zhihu.com/p/25321647

广东码农

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
47高度塌陷和BFC

高度塌陷正常状态<!DOCTYPE html><html lang="ch"><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"> <ti
复制链接

扫一扫

专栏目录