什么是高度塌陷 以及高度塌陷的解决办法
2021-01-08 16:41:57
当父元素高度自适应，子元素浮动后，造成父元素高度为0，称为高度塌陷。 高度塌陷怎么解决？方法一：给父元素一个固定的高度缺点：给父元素固定高度违背了高度自适应的原则，不够灵活，不推荐使用。方法二：给父...
收起
浅谈CSS 高度塌陷问题
2020-09-22 10:53:40
主要介绍了浅谈CSS 高度塌陷问题的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
收起
css高度塌陷问题的解决方案
2020-11-21 16:52:30
1. 高度塌陷 在文档流中，父元素的高度默认被子元素撑开，也就是说子元素多高，父元素就多高。但是，当为子元素设置浮动后，子元素会完全脱离文档流。此时，将会导致子元素无法撑起父元素的高度，导致父元素的高度...
收起
css浮动中避免包含元素高度为0的4种解决方法
2020-09-25 07:55:10
当一个元素只包含浮动元素的时候，它会出现高度折叠，即元素的上下底边重合，和高度为0效果一样，针对这个问题与大家分享四种解决方法，感兴趣的你可以参考下本文或许对你更好的理解css有所帮助
收起
逆战班：CSS高度塌陷及解决办法.html
2020-03-03 20:11:27
针对CSS中高度塌陷的问题进行描述，并给出了多种解决办法，跟给出了适合任何环境的万能清除法。可以建立统一适用的公共样式表，方便以后进行使用
收起

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

2020-10-24 15:15:19

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

一、什么是高度塌陷？ 
在文档流中，父元素的高度默认是被子元素撑开的，即子元素多高，父元素多高。但是为子元素设置浮动后，子元素会完全脱离文档流，此时会导致子元素无法撑起父元素，父元素高度塌陷。 
  <div class="a">
    <div class="b">
    </div>
  </div>
 
1. 子元素未设置浮动 
    .b{
      width: 100px;
      height: 100px;
      background-color: aqua;
    }
 

 此时，父元素被子元素撑起 
2. 子元素设置浮动 
.b{
      width: 100px;
      height: 100px;
      background-color: aqua;
      float: left;
    }
 
此时，父元素没有被子元素撑起，父元素高度塌陷 
二、高度塌陷导致的问题 
父元素高度塌陷，导致父元素下所有的元素都会向上移动，这样会导致页面布局混乱，在开发中一定要避免出现高度塌陷的问题 
  <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;
    }
 

 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;
    }
 
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;
    }
 
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;
    }
 

 这是副作用最小的开启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来处理

收起

展开全文

1024程序员节 html css

高度塌陷以及解决方法

千次阅读 2019-08-22 20:34:01

在文档流中，父元素的高度默认被子元素撑开的，也就是说子元素多高父元素就多高，但是当为我们子元素设置浮动以后，子元素就会完全脱离文档流，此时会导致子元素无法撑开父元素的高度，导致父元素的高度塌陷。...

高度塌陷问题

在文档流中，父元素的高度默认被子元素撑开的，也就是说子元素多高父元素就多高，但是当为我们子元素设置浮动以后，子元素就会完全脱离文档流，此时会导致子元素无法撑开父元素的高度，导致父元素的高度塌陷。由于父元素的高度塌陷，则父元素下的所有元素都会向上移动，导致页面的布局混乱。

高度塌陷解决方法

以下提出的解决方案将会越来越优化，最后一个方法是最为推荐的一个方法。

一、我们可以将父元素的高度写死，以避免高度塌陷的问题。但是一旦高度写死，父元素的高度将不能自动适应子元素的高度，所以这种方案是不推荐使用的。

二、开启BFC属性

根据W3C的标准，在我们的页面中元素都有一个隐含的属性叫做“Block Formatting Context”，简称BFC，该属性可以设置打开或者关闭，默认是关闭的。当我们开启元素的BFC以后，元素会具有以下特性：

1.父元素的垂直外边距不会和子元素重叠

2.开启BFC的元素不会被浮动元素覆盖

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

如何开启元素的BFC：

1.设置元素的浮动：这种方式开启虽然可以撑开父元素，但是会导致父元素的宽度丢失，而且这种方式也会导致下边的元素上移，不能解决问题。

2.设置元素的绝对定位

3.设置元素为inline-block：可以解决问题，但是会导致宽度丢失，不推荐使用这种方式

4.将我们元素的overflow设置为非visible的值（推荐方式：将overflow设置为hidden是副作用最小的开启BFC的方式）

注意：在IE6及以下的浏览器并不支持BFC，所以这种方式不能兼容IE6。在IE6中虽然没有BFC，但是具有另一个隐含的属性叫做hasLayout，该属性的作用和BFC类似，所以在IE6中，通过开启hasLayout属性来解决该问题。开启的方式有很多，我们直接使用一种副作用最小的方式，直接将元素的zoom值设置为1。zoom这个样式只在IE中支持，其他浏览器都不支持。

三、可以直接在高度塌陷的父元素的最后，添加一个空白的div

由于添加的div并没有浮动，所以他是可以撑开父元素的高度的，再对其进行清除浮动，可以通过空白的div来撑开父元素的高度，基本没有副作用。使用这种方式，虽然可以解决问题，但是会在页面中添加多余的结构。

四、通过after伪类来选中父元素的后面

可以通过after伪类向元素的的最后添加一个空白的块元素，然后对其清除浮动，这样做和添加div的原理一样，可以达到相同的效果，而且不会再页面中添加多余的div，这是我们最为推荐使用的方式，几乎没有副作用。

注意：在IE6及以下浏览器不支持after伪类，所以在IE6及以下浏览器还需要使用hasLayout来处理。

.clearfix:after{
		/*添加一个内容*/
		content: "";
	/*转成成一个块元素*/
		display: block;
		/*清除两侧浮动*/
		clear: both;
			}

收起

展开全文

前端

CSS中高度塌陷问题

千次阅读 2019-03-21 21:15:26

父元素在文档流中高度默认是被子元素撑开的，当子元素脱离文档流以后，将无法撑起父元素的高度，也就会导致父元素的高度塌陷 二.造成后果：父元素的高度一旦塌陷，所有标准流中元素的位置将会上移，导致整个页面...

一.高度塌陷产生原因：

父元素在文档流中高度默认是被子元素撑开的，当子元素脱离文档流以后，将无法撑起父元素的高度，也就会导致父元素的高度塌陷

二.造成后果：

父元素的高度一旦塌陷，所有标准流中元素的位置将会上移，导致整个页面布局混乱

三.解决方案：

1.开启父元素的BFC:

（1）Block Formatting Context 块级格式化环境

（2）BFC是元素的隐含属性，默认是在关闭状态的

（3）可以通过一些特殊的样式，来开启BFC

（4）开启BFC后元素具有如下特性：

		父元素的垂直外边距不会与子元素重叠

		开启BFC的元素不会被浮动元素所覆盖

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

（5）开启BFC的方式有：

		设置元素浮动

		设置元素的浮动定位

		设置元素的类型为inline-block

		设置overflow为一个非默认值，一般用overflow：hidden开启BFC

2.在塌陷的父元素最后添加一个空白的div，然后对该div进行清除浮动：

（1）代码示例：

		<div id="box1">
			<div id="box2"></div>
			<div style="clear:both"></div>
		</div>

（2）存在问题：使用这种方式会在页面中添加多余的结构

（3）清除浮动：

有时希望清除掉其他元素浮动对当前元素产生的影响，可以用clear来完成功能

clear可以用来清除其他浮动元素对当前元素的影响

（4）clear可选值：

		none：默认值不清楚浮动

		left：清除左侧浮动元素对当前元素的影响

		right：清除右侧浮动元素对当前元素的影响

		both：清除两侧浮动元素对当前元素的影响

3.使用after伪类，向父元素添加一个块元素，并对其进行浮动：

（1）该种方式原理与方法二原理一样（相当于在在后面加了一个空div），但是不用向页面添加对应的结构

（2）示例代码：

		.clearfix:after
			{
				content："";
				display:block;
				clear:both;
			}

四.高度塌陷完善：

1.子标签浮动，父标签高度崩塌

2.子元素和父元素相邻的垂直外边距会发生重叠，子元素的外边距会传递给父元素：

使用空的table标签可以隔离父子元素的外边距，阻止外边距的重叠

3.也可以使用伪元素或者伪类before、after实现：

	.clearfix:after,.clearfix:after{
				content："";
				display:table;
				clear:both;
			}

4.通过修改后的clearfix是一个多功能的既可以解决高度塌陷，又可以确保父元素和子元素的垂直外边距不会重叠

收起

展开全文

CSS 浮动定位清除浮动

高度塌陷

2018-07-15 14:17:25


  版权声明：
 
 本文作者：
 dear_mr      
 https://blog.csdn.net/dear_mr/article/details/71325719 
 







 
 
 一、什么是高度塌陷？ 
 简单来说，就是包含含有浮动的元素的上一级的高度变为0了，下面的元素会上去 
 <!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
        .par {
            border: 1px solid green;
        } 
        .sub {
            width: 20%;
            height: 50px;
            float: left;
            border: 1px solid red;
        }
        .only {
            width: 30%;
            height: 60px;
            background: #999;
        }
    </style>
</head>
<body>
    <div class="par">
        <div class="sub div1"></div>
        <div class="sub div2"></div>
        <div class="sub div3"></div>
    </div>
    <div class="only"></div>
</body>
</html>
  1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31 
 上面的这个例子，可以看出来class为par的div的内部是含有三个子div的，当子div没有设置浮动的时候，表现出来大的效果是下面这样的，可以看出class="only"这个div的显示是在class="par"的后面的，而class="par"的高度等于里面的div（此时是按照块元素方式进行排列的）撑起来的高度 
  
 当sub这个类选择器设置了float: left的时候，结果如下面所示，可以看出来，好像它们都挤到一块去了，而class="par"的这个外部div的height很明显是等于0的，它里面的div是浮动排列的，而class="only"的这个div可以看出来是“跑到”它上面的元素的位置去的，就好像它上面的元素都并不存在似的，这个也就是我今天要说的“高度塌陷”这个问题了 【float 之后，有float属性的div就漂浮起来，与普通div 不在一个平面上。上一级”par”div的高度 就撑不起来，变成原大小了】
  
 二、解决办法 
 首先从上面的例子中可以很容易看到，导致问题出现的原因就是因为设置了浮动，当子元素设置了浮动的时候，子元素就会完全脱离文档流，此时会导致子元素无法撑起父元素的高度，导致父元素高度塌陷 
 那么浮动是什么呢？ 
 float是css的定位属性，通过使用float这个属性可以实现元素的浮动 
 值 描述
left 元素向左浮动
right 元素向右浮动
none 默认值，元素不浮动，并会显示在其文本中出现的位置
inherit 规定应该从父元素继承float属性 
 下面就来说一下解决（清除浮动）的办法 
 1. 父元素结束之前，添加一个标签 
 <div style="clear: both;"></div>
  1 
 优点：简单，易于实现 
 缺点：添加了没有意义的空标签 
 2. 父元素设置overflow: auto或者浮动元素设置overflow: hidden 
 .par {
  border: 1px solid green;
  overflow: auto;
} 
.sub {
  width: 20%;
  height: 50px;
  float: left;
  border: 1px solid red;
  overflow: hidden;
}
  1
2
3
4
5
6
7
8
9
10
11 
 缺点：overflow: auto如果超出范围会自动生成一个滚动条，而overflow: hidden可能会导致超出部分直接隐藏且不占用文档流的空间 
 3. 让父元素本身也浮动 
 .par {
  border: 1px solid green;
  float: left;
} 
  1
2
3
4 
 缺点：使得跟父元素相邻的元素的布局受到影响，不推荐使用 
 4. 使用CSS的after伪元素 
 .clearfix:after {
  content: ".";         /*生成内容作为最后一个元素，至于content里面是什么没有影响*/
  display: block;       /*使得生成的元素以块级元素显示，占满剩余空间*/
  height: 0;            /*避免生成的内容破坏原有空间的高度*/
  clear: both;          /*闭合浮动*/
  visibility: hidden;   /*使得生成内容不可见，并允许可能生成内容盖住的内容进行点击和交互*/
}
.clearfix {
  zoom : 1;             /*触发IE6/7的haslayout*/
}
  1
2
3
4
5
6
7
8
9
10 
 三、BFC（Block formating context） 
 BFC块级格式化上下文，它是一个独立的渲染区域，一句摘自别人博客的话“BFC元素特征表现原则就是，内部元素再怎么翻江倒海，翻云覆雨都不会影响外部的元素”（http://www.zhangxinxu.com/wordpress/2015/02/css-deep-understand-flow-bfc-column-two-auto-layout/） 
 触发BFC的情况： 
 float的值不为none的时候
overflow的值为auto，scroll或者hidden
display的值为table-cell，table-caption，inline-block
position的值不是relative和static 
 看到这里是不是发现，这个和上面列举的方式有点关系了，对的，我们也不难看出，触发了BFC就可以消除（闭合）浮动 
  
  关于这个问题就先写到这里了，希望对你有帮助 ^_^

值	描述
left	元素向左浮动
right	元素向右浮动
none	默认值，元素不浮动，并会显示在其文本中出现的位置
inherit	规定应该从父元素继承float属性

收起

展开全文

HTML浮动导致高度塌陷,浮动元素特性（解决高度塌陷问题）
2021-06-23 06:30:59
) */ /* 开启元素的BFC，解决高度塌陷问题 */ overflow: hidden; } .inner{ float: left; background-color: pink; height: 100px; width: 100px; } .other{ background-color: teal; height: 200px; width: 200px; ...
收起
CSS高度塌陷.md
2019-08-27 20:09:55
父元素在文档流中默认的高度是由子元素撑开的，由于子元素添加浮动后会脱离文档流，无法撑起父元素，会导致父元素的高度塌陷。本文解释了CSS高度塌陷的原因及高度塌陷解决方案。
收起
什么叫高度塌陷？
2020-02-25 00:11:42
首先要知道高度塌陷是：浮动元素父元素高度自适应（高度塌陷）当子元素有浮动并且父元素没有高度的情况下父元素会出现高度塌陷 简而言之就是但子元素设置浮动属性，父元素就会...
收起
html html5 css3 css
css高度自适应出现盒子高度塌陷问题
2021-05-20 20:40:00
在网页布局中经常会遇到想给盒子设置高度自适应但出现高度塌陷问题，造成这个问题的原因就在于父盒子没有设置高度，子盒子有浮动这里有四种解决高度塌陷的方法一、给父盒子添加高度，这个可以从根本上解决问题，但...
收起
css css3 html5 html
父级元素未设置高度和宽度时高度塌陷问题的解决方法
2020-12-13 03:23:54
那么它的高度就会塌缩为零，也就是所谓的“高度塌陷”，如果父级元素包含背景或者边框，那么溢出的元素就不像父级元素的一部分了。解决“高度塌陷”的问题很简单： 1.浮动父级元素如果让父级元素浮动，父级元素的...
收起
高度塌陷的产生条件和解决方法
2020-02-23 21:09:23
这是一些前端容易问到的问题，大家一起共勉。主要为大家解决一些平常经常遇到的问题，大家一起解决，一起指正。
收起
解决CSS高度塌陷问题
千次阅读 2019-03-25 10:51:57
什么是高度塌陷 在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。但是当为子元素设置浮动以后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的...
收起
clearfix 解决高度塌陷
2021-06-15 21:27:19
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .box1{ width: 300px; height: 300px;... .
收起
html css
高度塌陷和BFC
2020-03-30 23:52:06
高度塌陷问题的产生在文档流中，父元素的高度默认是被子元素撑开的，子元素多高，父元素就多高。但是当为子元素设置浮动以后，子元素会完全脱离文档流，此时就会导致子元素无法撑起父元素的高度，由此引发父元素的...
收起
html5 css
HTML浮动导致高度塌陷,前端–解决浮动引起的高度塌陷问题
2021-06-23 06:31:02
今天学习了如何解决HTML页面子元素浮动时由于脱离文档流导致的其父元素(未设置宽高)高度塌陷的问题。接下来，我们来谈谈这个问题的解决步骤。首先我们先引出一个概念:Block Fomatting Context，我们称为块格式化上...
收起
前端-关于高度塌陷的四种解决方式
千次阅读 2019-07-25 21:37:57
如果父元素只包含浮动元素，且父元素未设置高度和宽度，那么它的高度就会塌缩为零，也就是所谓的“高度塌陷”。如果父级元素包含背景或者边框，那么溢出的元素就不像父级元素的一部分了。解决“高度塌陷”问题的...
收起
塌陷
高度塌陷的产生原因及解决方法
千次阅读 2020-02-23 17:23:53
当父元素未设置高度时，所有子元素浮动后，造成子元素脱离文档流进而无法把父元素撑开，父元素高度为0产生高度塌陷，称为高度塌陷问题。父元素高度塌陷后，父元素以下的元素都会向上移动，导致布局混乱，所以我们...
收起
CSS解决高度塌陷的方法
千次阅读 2020-03-01 18:34:37
当父元素不设置高度的时候靠子元素撑大，也就是说子元素有多高，父元素就有多高，当子元素子元素浮动后，父元素就会高度塌陷。父元素高度塌陷后，父元素下面的元素就会向上移动，这样会导致整个页面的布局混乱。 ...
收起
css html css3 html5
浮动布局中的高度塌陷问题
2021-06-13 22:22:18
高度塌陷：在浮动布局中，父元素的高度默认被子元素撑开，但当子元素发生浮动时，会从文档流中脱离，此时无法撑起父元素的高度，导致元素的高度丢失，影响页面布局，一般将这种情况叫做高度塌陷。处理方式：为父...
收起
css css3
高度塌陷 解决高度塌陷 导航条清除浮动相对定位
2019-01-01 20:38:51
1 高度塌陷 在文档流中，父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高但是当为子元素设置浮动以后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷...
收起
清除高度塌陷的三种解决方法:
2021-07-24 19:42:54
清除高度塌陷的三种解决方法: ...2.给产生高度塌陷的元素最后面添加一个div：并且给他设置高度为0，clear：both【清除浮动对添加的div的影响】实现原理:清除浮动带来的影响缺点:代码的冗余 3.万能...
收起
解决高度塌陷
2018-12-26 23:02:59
第一种 <!DOCTYPE html> <html lang="en"> <...高度塌陷</title> <style type="text/css"> .box1{ bo
收起
absolute导致的高度塌陷问题——解决方法
千次阅读 2020-07-03 23:47:47
在文档流中，父元素的高度默认被子元素撑开的，也就是说子元素多高父元素就多高，但是当为我们子元素设置浮动以后，子元素就会完全脱离文档流，此时会导致子元素无法撑开父元素的高度，导致父元素的高度塌陷。...
收起
javascript css html html5 css3
解决高度塌陷问题
2021-10-18 00:38:28
高度塌陷：在浮动布局中，父元素的高度默认是被子元素撑开的。当子元素浮动以后，其会完全脱离文档流，子元素从文档流脱离，将会无法撑起父元素的高度，导致父元素高度的缺失。父元素的高度丢失以后，其下的元素...
收起
css html html5

什么是高度塌陷 以及高度塌陷的解决办法

浅谈CSS 高度塌陷问题

css高度塌陷问题的解决方案

css浮动中避免包含元素高度为0的4种解决方法

逆战班：CSS高度塌陷及解决办法.html

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

一、什么是高度塌陷？

1. 子元素未设置浮动

2. 子元素设置浮动

二、高度塌陷导致的问题

三、解决方案

1、解决方案1：将父元素高度写死（不推荐）

2、解决方案2：开启BFC

如何开启BFC

注意：

3、解决方案三（较推荐）

4、解决方案四（最推荐）

高度塌陷以及解决方法

高度塌陷问题

高度塌陷解决方法

CSS中高度塌陷问题

一.高度塌陷产生原因：

二.造成后果：

三.解决方案：

1.开启父元素的BFC:

2.在塌陷的父元素最后添加一个空白的div，然后对该div进行清除浮动：

3.使用after伪类，向父元素添加一个块元素，并对其进行浮动：

四.高度塌陷完善：

1.子标签浮动，父标签高度崩塌

2.子元素和父元素相邻的垂直外边距会发生重叠，子元素的外边距会传递给父元素：

3.也可以使用伪元素或者伪类before、after实现：

4.通过修改后的clearfix是一个多功能的既可以解决高度塌陷，又可以确保父元素和子元素的垂直外边距不会重叠

高度塌陷

一、什么是高度塌陷？

二、解决办法

1. 父元素结束之前，添加一个标签

2. 父元素设置overflow: auto或者浮动元素设置overflow: hidden

3. 让父元素本身也浮动

4. 使用CSS的after伪元素

三、BFC（Block formating context）

HTML浮动导致高度塌陷,浮动元素特性（解决高度塌陷问题）

CSS高度塌陷.md

什么叫高度塌陷？

css高度自适应出现盒子高度塌陷问题

父级元素未设置高度和宽度时高度塌陷问题的解决方法

高度塌陷的产生条件和解决方法

解决CSS高度塌陷问题

clearfix 解决高度塌陷

高度塌陷和BFC

HTML浮动导致高度塌陷,前端–解决浮动引起的高度塌陷问题

前端-关于高度塌陷的四种解决方式

高度塌陷的产生原因及解决方法

CSS解决高度塌陷的方法

浮动布局中的高度塌陷问题

高度塌陷 解决高度塌陷 导航条 清除浮动 相对定位

清除高度塌陷的三种解决方法:

解决高度塌陷

absolute导致的高度塌陷问题——解决方法

解决高度塌陷问题

高度塌陷为0

什么是高度塌陷以及高度塌陷的解决办法

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

2. 父元素设置`overflow: auto`或者浮动元素设置`overflow: hidden`

高度塌陷解决高度塌陷导航条清除浮动相对定位