高度塌陷、清除与BFC（内含完美解决方案）

一、高度塌陷

1、什么是高度塌陷

2、高度塌陷实例

二、清除属性

一、高度塌陷

1、什么是高度塌陷

当我们不确定子元素的大小和宽高，通过子元素的宽高决定父元素宽高时，会出现这种情况

（1）我们需要多个子元素，子元素可以控制宽高，且行排列

（2）由于子元素不超过父元素边界，我们使用浮动

但由于子元素脱离文档流，则导致在文档流中的父元素无法获取子元素的宽高，导致高度塌陷

2、高度塌陷实例

二、清除属性

1、清除作用的效果

消除浮动对后面元素的影响

2、清除作用的原理

通过强制添加外边距的方式对后面元素进行影响

3、清除作用的实例

在本例中，1和2分别进行左浮动和右浮动，3进行了清除，所以它会保持块元素性状，始终在1和2的下方

4、清除的可选值

（1）left清除左边浮动影响

（2）right清除右边浮动影响

（3）both清除两侧影响较大的浮动影响，在上面的例子中，清除了2的影响

三、BFC

1、什么是BFC

（1）BFC全名块级格式化环境，英文名block formatting context

（2）BFC是CSS中隐含样式，脱离于整体布局，自建布局模式，形成独立布局区域，多用于解决float脱离文档流后高度塌陷

2、BFC特点

（1）不会被浮动元素覆盖

（2）子元素父元素边距不会重叠

（3）开启BFC可以包含浮动的子元素

3、如何开启BFC

（1）父元素float，但是会影响父元素布局（不推荐）

（2）将元素设置为行内块元素，但会导致宽度消失（不推荐），例如

display: inline-block;

（3）将元素overflow设置为非visible（默认值），通常是hidden或者auto，可以解决大多数问题，且副作用比较小，比较常用，例如

overflow: hidden;

（4）通过display设置为flow-root，尚不清楚副作用如何（听说官方文档中无副作用）

四、边距折叠和高度塌陷完美解决方案

1、原理

（1）通常进行浮动时，会不止一个元素，也就是说，我们可以浮动一部分元素，另外一部分不浮动，用以撑起高度

（2）用clear清除前面的浮动影响，那么就会成为可行排列的块元素，高度由后面的元素撑起，例如

本图中，蓝色区域是一个div标签，紧跟在绿色区域后，它清除了绿色区域的浮动影响，这里加了背景颜色和大小，方便观察

蓝色区域代码：


.box{
    background-color: blue;
    clear: both;
    width: 100px;
    height: 200px;
}

2、比较合理的方式

（1）但是，假如后面的高度与前面浮动的高度不同，仍然会出问题

（2）那么，就不对后面的元素操作，让它“闲置”，仅仅用于前面浮动元素的“压箱底”，例如

此图与上面同属一个代码，但仅仅取消了div标签的高度和宽度以及背景颜色

clear区域代码：


.box{
    clear: both;
}

3、最完美的方式

（1）该方法犯了一个很大的错误，用HTML结构去影响CSS的样式，这是容易出错的

（2）在卡面提到了每一个元素有before和after伪类，这是元素的内容之外但又收敛于元素的属性，对该伪类进行clear，则完美无缺

（3）常自定义这个clearfix类，使用时添加到class中，可同时解决高度塌陷和边距折叠


.clearfix::before,
.clearfix::after{
    content: '';
    display: table;
    clear: both;
}

五、代码

1、高度塌陷与BFC


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>高度塌陷与BFCtitle>
    <style>
      /* 
    介绍：
        BFC(block formatting context)块级格式化环境
        BFC是css中隐含样式，脱离于整体布局，自建布局模式，形成独立布局区域
        多用于解决float脱离文档流后高度塌陷
    特点：
        1.不会被浮动元素覆盖
        2.子元素父元素边距不会重叠
        3.开启BFC可以包含浮动的子元素
    方式：
        1.父元素float，但是会影响父元素布局（不推荐）
        2.将元素设置为行内块元素，会导致宽度消失
        display: inline-block;
        3.将元素overflow设置为非visible（默认值），通常是hidden或者auto
    */
      .outer {
        border: solid red 10px;
        /* overflow: hidden; */
 
        /* 听说没有副作用 */
        /* display: flow-root; */
      }
      .inner {
        background-color: #bfa;
        width: 200px;
        height: 200px;
        float: left;
      }
      .box {
        /* background-color: blue; */
        clear: both;
        /* width: 100px; */
        /* height: 200px; */
      }
    style>
  head>
  <body>
    <div class="outer">
      <div class="inner">div>
      <div class="box">div>
    div>
  body>
html>

2、清除


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>清除title>
    <style>
      div {
        font-size: 50px;
        width: 100px;
        height: 100px;
      }
      .box1 {
        background-color: #bfa;
        float: left;
      }
      .box2 {
        width: 200px;
        height: 200px;
        background-color: red;
        float: right;
      }
      .box3 {
        background-color: blue;
        /* 
            清除浮动影响，both默认清除最大影响
            原理：
            加上上外边距
            */
        clear: both;
      }
    style>
  head>
  <body>
    <div class="box1">1div>
    <div class="box2">2div>
    <div class="box3">3div>
  body>
html>

3、clearfix


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>同时解决边距折叠与高度塌陷title>
    <style>
      .outer {
        border: 10px solid red;
      }
      .inner {
        width: 200px;
        height: 200px;
        background-color: #bfa;
        float: left;
      }
      .box {
        margin-top: 100px;
        width: 100px;
        height: 100px;
        background-color: orange;
      }
      /* .outer::before,
        .outer::after{
            content: '';
            display: table;
            clear: both;
        } */
      .clearfix::before,
      .clearfix::after {
        content: "";
        display: table;
        clear: both;
      }
    style>
  head>
  <body>
    <div class="outer clearfix">
      <div class="inner">
        <div class="box">div>
      div>
    div>
  body>
html>

相关阅读:
千峰商城-springboot项目搭建-78-购物车结算-查询购物车记录接口
 2023年第九届数维杯国际大学生数学建模挑战赛A题
 Solidity--合约最大栈深度与解决方案
 Leetcode2-两数相加代码详解
 快速学会JDBC及获取连接的五种方式
 Java 多线程编程
 学习Cesium.js的必须要了解的工具CesiumLab
iOS 组件化之使用 Cocoapods 创建本地 Pod
vm虚拟机安装debian NAT模式桥接模式究竟是什么意思
 【毕业设计】基于超声波智能跟随小车 - 单片机物联网 stm32 c51
原文地址：https://blog.csdn.net/comegoing_xin_lv/article/details/126086973