欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

CSS - 什么是高度塌陷 及 高度塌陷的解决方法

程序员文章站 2022-06-19 15:49:39
一、什么是高度塌陷?在文档流中,父元素的高度默认是被子元素撑开的,即子元素多高,父元素多高。但是为子元素设置浮动后,子元素会完全脱离文档流,此时会导致子元素无法撑起父元素,父元素高度塌陷。
1. 子元素未设置浮动 .b{ width: 100px; height: 100px; background...

一、什么是高度塌陷?

在文档流中,父元素的高度默认是被子元素撑开的,即子元素多高,父元素多高。但是为子元素设置浮动后,子元素会完全脱离文档流,此时会导致子元素无法撑起父元素,父元素高度塌陷

  <div class="a">
    <div class="b">
    </div>
  </div>
1. 子元素未设置浮动
    .b{
      width: 100px;
      height: 100px;
      background-color: aqua;
    }

CSS - 什么是高度塌陷 及 高度塌陷的解决方法
此时,父元素被子元素撑起

2. 子元素设置浮动
.b{
      width: 100px;
      height: 100px;
      background-color: aqua;
      float: left;
    }

CSS - 什么是高度塌陷 及 高度塌陷的解决方法此时,父元素没有被子元素撑起,父元素高度塌陷

二、高度塌陷导致的问题

父元素高度塌陷,导致父元素下所有的元素都会向上移动,这样会导致页面布局混乱,在开发中一定要避免出现高度塌陷的问题

  <div class="a1">
    <div class="b">
    </div>
  </div>
  <div class="a2">
  </div>
    .b{
      width: 100px;
      height: 100px;
      background-color: aqua;
      float: left;
    }
    .a2{
      width: 100px;
      height: 100px;
      background-color: blueviolet;
    }

CSS - 什么是高度塌陷 及 高度塌陷的解决方法
b脱离文档流,导致a1高度塌陷,a2向上移动,和b重叠,页面布局混乱

三、解决方案

1、解决方案1:将父元素高度写死(不推荐)

父元素高度写死,可以避免塌陷问题,但是一旦将父元素高度写死,它将不能自动适应子元素的高度

    .a1{
      width: 100px;
      height: 100px;
    }
    .b{
      width: 100px;
      height: 100px;
      background-color: aqua;
      float: left;
    }
    .a2{
      width: 100px;
      height: 100px;
      background-color: blueviolet;
    }

CSS - 什么是高度塌陷 及 高度塌陷的解决方法a2没有和b重叠

但是父元素不能自动适应子元素的高度,比如:我将b的高度设置为200px

.a1{
      width: 100px;
      height: 100px;
    }
    .b{
      width: 100px;
      height: 200px;
      background-color: aqua;
      float: left;
    }
    .a2{
      width: 100px;
      height: 100px;
      background-color: blueviolet;
    }

CSS - 什么是高度塌陷 及 高度塌陷的解决方法a2同样被b覆盖
所以不推荐使用

2、解决方案2:开启BFC

根据W3C标准,页面中的每一个元素都有一个隐藏的属性BFC(Block Formatting Context 块级格式化上下文),该属性可以设置打开或者关闭,默认是关闭的

BFC概念:它是页面中的一块渲染区域,并且有一套渲染规则,它决定了其子元素将如何定位,以及和其他元素的关系和相互作用

简单来说,具有 BFC 特性的元素可以看作是隔离了的独立容器,容器里面的元素不会在布局上影响到外面的元素,反之也如此,并且 BFC 具有普通容器所没有的一些特性。

如何开启BFC

方法一:设置元素浮动(不能解决高度塌陷问题,不推荐使用)

方法二:设置元素的绝对定位(不能解决高度塌陷问题,不推荐使用)

方法三:设置元素为inline-block(不能解决高度塌陷问题,不推荐使用)

方法四:将元素的overflow设置为非visible值(推荐使用)

.a1{
      overflow: hidden;
    }
    .b{
      width: 100px;
      height: 100px;
      background-color: aqua;
      float: left;
    }
    .a2{
      width: 100px;
      height: 100px;
      background-color: blueviolet;
    }

CSS - 什么是高度塌陷 及 高度塌陷的解决方法
这是副作用最小的开启BFC的方法,推荐使用

注意:

在IE6及以下版本不支持BFC,所以使用此方法不能兼容IE6及以下版本

IE6中有另一个隐含的属性hasLayout,该属性的作用和BFC类似,可以开启hasLayout来解决问题

开启hasLayout的方式有很多,将zoom设置为1是副作用最小的方式

zoom表示放大,设置为几就放大几倍。该属性只在IE浏览器中支持,其他浏览器中都不支持

为了解决高度塌陷问题,并且兼容所有浏览器,最好的方法是都写上

3、解决方案三(较推荐)

步骤一:直接在高度塌陷的父元素的最后添加一个空的div,由于这个div没有浮动,所以它可以撑开父元素的高度

步骤二:然后对其进行清除浮动,通过这个空白div来撑起父元素的高度

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .a1{
    }
    /* 步骤二:对其进行清除浮动,通过空白div来撑起 */
    .clear{
      clear: both;
    }
    .b{
      width: 100px;
      height: 100px;
      background-color: aqua;
      float: left;
    }
    .a2{
      width: 100px;
      height: 100px;
      background-color: blueviolet;
    }
  </style>
</head>
<body>
  <div class="a1">
    <div class="b">
    </div>
    <!-- 步骤一:在高度塌陷的父元素的最后添加一个空的div -->
  	<div class="clear"></div>
  </div>
  <div class="a2">
  </div>
</body>
</html>

此方法基本没有副作用

缺点:虽然可以解决问题,但是会在页面中添加多余的结构

4、解决方案四(最推荐)

步骤一:通过::after选中a1的后面
步骤二:添加一个内容
步骤三:将其转化为块元素
步骤四:清除两侧浮动

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* 步骤一:通过::after选中a1的后面 */
    .a1::after{
      /* 步骤二:添加一个内容 */
      content: "";
      /* 步骤三:将其转化为块元素 */
      display: block;
      /* 步骤四:清除两侧浮动 */
      clear: both;
    }
    .b{
      width: 100px;
      height: 100px;
      background-color: aqua;
      float: left;
    }
    .a2{
      width: 100px;
      height: 100px;
      background-color: blueviolet;
    }
  </style>
</head>
<body>
  <div class="a1">
    <div class="b">
    </div>
  </div>

  <div class="a2">
  </div>
</body>
</html>

这种方法和添加一个div的原理一样,可以达到相同的效果,并且不会在页面中添加多余的结构

这是最推荐使用的方法,几乎没有副作用

在IE6不支持::after,所以在IE6中还需要使用hasLayout来处理

本文地址:https://blog.csdn.net/asfcyg/article/details/109248984