CSS 中父级元素的高度一般由子元素撑开，不会特意设置高度，但是以下情况会造成父级元素高度坍塌，也就是高度为零，影响后面元素的排版。主要有两个原因：

1. ）子元素使用绝对定位

2. ）子元素浮动

1）子元素使用绝对定位，父元素没设置宽高

此时子元素已从正常文档流中移除，并且不会在页面布局中为该元素创建空间。所以父元素依靠子元素撑起其宽高时会为0；

解决方案：子元素的绝对定位改为 相对定位或者直接去掉。

改为相对之后页面布局时会为子元素创建相应的空间，此时没设置宽高的父元素也会被子元素撑起来了。

2）子元素浮动，父元素没设置宽高

先介绍一下元素浮动

3）浮动有什么用？

4）清楚浮动

5）子元素浮动会造成父元素大坍塌

几种解决方案：

相信很多小伙伴初学浮动，在页面布局的时候可能会出现这种现象， 父 元素 身上没有设置 高度 ，想让 子元素 撑起 父 元素 ，而给 子元素 添加浮动属性之后， 父 元素 的 高度 为0的情况。 我一直很困惑 绝对定位 后 父 盒子的 高度 会变为0，如何让 绝对定位 的 元素 撑开 父 盒子呢？ 我在StackOverflow上找到的高分 解决方案 如下： Absolutely positioned elements are completely removed from the document flow, and thus their dimensions cannot alter the dimensions... 1、利用 display：flex 布局 父 元素 设置 display：flex，justify-content:center, align-item:center 2、利用定位给 父 元素 设置相对定位， 子元素 设置 绝对定位 ， 子元素 设置 top:50%，left:50%，margin-top： 子元素 高的一半，margin-left： 子元素 宽的一半 3、利用 transform 父 元素 设置相对定位， 子元素 设置 绝对定位 ， 子元素 设置 top:50%，left:50%， transform-tr 通用的同级选择器(〜)不如相邻的同级选择器严格。它使你可以选择作为指定 元素 的同级的所有 元素 ，即使它们并非直接相邻。是指 父 元素 触发hover事件，并且控制 父 元素 中的 子元素 做出响应。是指 子元素 触发hover事件时，其 父 元素 做出相关相应。指处在统一层级的 元素 的hover控制关系。 问题：当 子元素 中使用了float时，如果其 父 元素 不指定 高度 ，其 高度 将为0解决：清除(闭合)浮动 元素 ，使其 父 div 高度 自适应方法一：额外标签+clear:both(W3C推荐方法，兼容性较好)在 父 div的最后插入一个无语义的额外标签，使其style为clear:both。如：或：方法二：使用after伪类(兼容性一般)使用伪类在 父 div的末尾添加新的内容(如一个点... 在 CSS 中，Position 属性经常会用到，主要是 绝对定位 和相对定位，简单的使用都没有问题，尤其嵌套起来，就会有些混乱，今记录总结一下。 1、相对定位( position: relative;) 如果对一个 元素 进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个 元素 “相对于”它的起点进行移动。 relative：生成相对定位的 元素 ，相对于其正常(原来)位置进行定位。 2、 绝对定位 （position: absolute;） 绝对定位 使 元素 的位置与文档流无关，因此不占.. static(静态的) 元素 的默认值，即没有定位，遵循正常的文档流对象 静态定位的 元素 不会受到 top, bottom, left, right影响。粘性定位的 元素 是依赖于用户的滚动，在 position:relative 与 position:fixed 定位之间切换。relative (相关的 相对的) 相对定位 元素 的定位是相对其正常位置。2. 元素 只设置 绝对定位 ，当前位置脱离文档流一旦设置偏移量， 绝对定位 元素 进行移动。8.定位 父级 ：通过设置相对定位， 绝对定位 ，固定定位 决定了 元素 的参考位置。 自己编写轮播图切换的时候前一幅图滑动时后边出现空白直到前一幅图全部滑出后第二幅图才出现。刚开始出现问题到网上搜发现有的说定时器动画可能会造成这种情况，于是我在代码调试里注释掉了定时器，让图片只走一步就停下来，发现后边还是有空白，所以确定不是定时器的问题。于是我查看了一下盒模型，发现包裹img的容器宽度p#main并不是我理想中六张图片宽度的总和，原来是我没有显式设置这个容器p#main的宽度。但是问题来了，没有显式地设置容器宽度，大家可能就会