解决浮动元素导致的父元素高度塌陷：BFC原理与应用-优快云博客

本文链接：https://blog.youkuaiyun.com/mantou_riji/article/details/124109061

文章目录

问题引入
解决——开启BFC
终极解决办法——没有副作用

问题引入

高度塌陷的间题:
在浮动布局中,父元素的高度默认是被子元素撑开的，当子元素浮动后，其会完全脱离文档流，子元素从文档流中脱离将会无法撑起父元素的高度，导致父元素的高度丢失父元素高度丢失以后，其下的元素会自动上移，导致页面的布局混乱。

eg：
未浮动时：
在这里插入图片描述
浮动时：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        .outer{
            border:10px rgb(92, 25, 25) solid;
        }
        .inner{
            width: 100px;
            height: 100px;
            background-color: teal;
            float: left;
        }
        .box3{
            width: 200px;
            height: 200px;
            background-color: rgb(245, 245, 3);

        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner"></div>
    </div>
    <div class="box3"></div>
    
</body>
</html>

解决——开启BFC

BFC(Block Formatting Context)块级格式化环境

基本概念

BFC是CSS中的一个隐含的属性,可以为一个元素开启BFC,开启BFC该元素会变成一个独立的布局区域

元素开启BFC后的特点

1.开启BFC的元素不会被浮动元素所覆盖
2.开启BFC的元素子元素和父元素外边距不会重叠
(解决：设置子元素的margin-top会做用到父元素上的问题。)
3.开启BFC的元素可以包含浮动的子元素
(可以解决上面的问题)

开启元素的BFC的方法

BFC是一个硬汉的属性不能直接开启，并且不同的开启方法多好都会有一些副作用，下面是3种开启的方法：

1、设置元素的浮动（不推荐）
2、将元素设置为行内块元素(不推荐)
3、将元素的overflow设置为一个非visible的值
——常用的方式为元素设置overflow: hidden开启其BFC以使其可以包含浮动元素

是为元素开启BFC，哪个元素需要就开启哪个就可以。

eg：开启BFC的元素可以包含浮动的子元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        .outer{
            border:10px rgb(92, 25, 25) solid;
            overflow: hidden;
        }
        .inner{
            width: 100px;
            height: 100px;
            background-color: teal;
            float: left;
        }
        .box3{
            width: 200px;
            height: 200px;
            background-color: rgb(245, 245, 3);

        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner"></div>
    </div>
    <div class="box3"></div>
    
</body>
</html>

输出：
在这里插入图片描述
eg:开启BFC的元素不会被浮动元素所覆盖

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        .box1{
            width: 100px;
            height: 100px;
            background-color: yellow;
            float: left;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: yellowgreen;
            overflow: hidden;
        }
    </style>
 
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>

    
</body>
</html>

效果：
在这里插入图片描述

eg:开启BFC的元素子元素和父元素外边距不会重叠

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        .box1{
            width: 200px;
            height: 200px;
            background-color: yellow;
            overflow: hidden;
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: yellowgreen;
            margin-top: 100px;
        }
    </style>
 
</head>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
    

    
</body>
</html>

效果：
在这里插入图片描述

终极解决办法——没有副作用

利用另一个容器和clear进行解决
将另个容器放到 inner下面，并使用clear：box;清除浮动的影响来撑起外容器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        .outer{
            border:10px rgb(92, 25, 25) solid;
        }
        .inner{
            width: 100px;
            height: 100px;
            background-color: teal;
            float: left;
        }
        .inner2{
            clear: both;
        }
        .box3{
            width: 200px;
            height: 200px;
            background-color: rgb(245, 245, 3);

        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner"></div>
        <div class="inner2"></div>
    </div>
    <div class="box3"></div>
    
</body>
</html>

问题：结构和表象耦合
解决：使用 ::after 伪元素解决

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        .outer{
            border:10px rgb(92, 25, 25) solid;
        }
        .inner{
            width: 100px;
            height: 100px;
            background-color: teal;
            float: left;
        }
        .outer::after{
            content: '';
            display: block;
            clear: both;
        }
       
        .box3{
            width: 200px;
            height: 200px;
            background-color: rgb(245, 245, 3);

        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="inner"></div>
    </div>
    <div class="box3"></div>
    
</body>
</html>