前段时间写前端页面排版的时候又又又遇到了absolute导致的父元素高度塌陷的问题，以前代码写的少所以遇到问题就是查查查，问题解决后了一个漫长的学期后又遇到一样的问题又得重新查查查，所以这次索性总结一下。

什么是高度塌陷？

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

正常代码：

代码结果：父元素(蓝色背景）高度被子元素（红色边框）高度撑起

问题出现：当子元素添加了positive：absolute属性后。
结果：父元素高度塌陷，高度为0。

温馨提示：因为position设置为absolute而导致高度塌陷的同学可跳过下列四种常见的解决方法，因为无法解决问题（具体原因请往下拉…）

常见的高度塌陷问题的解决方法

1. 给父元素添加固定高度。
   （缺点：添加了固定高度的父元素高度不再自适应）
2. 给父元素添加属性overflow: hidden;
   （缺点：当子元素有定位属性时,容器以外的部分会被裁剪掉)
3. 在子元素的末尾添加一个高度为0的空白 div来清除浮动属性。
   （缺点：在页面中添加无意义的div会造成代码冗余）

//代码结构如下
     <div class="father" >
         <div class="son"></div>
         //清除浮动属性的div
         <div style="clear: both;"></div>
    </div>
</body>
给父元素中添加一个伪元素。
 
 .父元素:after{
                 content: "";
                 height: 0;
                 clear: both;
                 overflow: hidden;
                 display: block;
                 visibility: hidden;
（👇下拉同学请看这里！！！！）
 当高度塌陷是因为position设置为absolute所导致的时候，上面的四种方法除了第一种把高度写死之外，其它三种方法都是无效的。
 
原因：解决父元素高度塌陷的通常解决办法是在父元素中开启BFC。当子元素脱离文档流的原因是float，则可以通过开启BFC解决。但是如果子元素脱离文档流是因为absolute或者fixed，则开启BFC同样不管用。这种情况下，CSS没有办法解决，只能通过JS获取子元素的高度然后赋值给父元素来解决。
 
        <div class="container" id="container">
            <div class="box" id="box" ></div>
        </div>
        <script>
            //拿到子元素的高度
            var box=document.getElementById("box").offsetHeight;
            //将子元素的高度赋予父元素
            document.getElementById("container").style.height=box;
            alert(box);
        </script>
</body>
至此absolute导致的父元素高度塌陷问题解决👍
 
后来我尝试将绝对定位改为相对定位，这样相对定位子元素的位置还是会在原来的位置，不会脱离文档流。所以块还是快，内联还是内联，但是子元素会提升一个层级，相对自身的位置进行定位也是一种解决方法。
 
查资料的时候意外发现针对absolute的高度塌陷问题好像没什么人写，难道是因为它只能用JS解决而大神们都不屑于写这种小文章了吗？我这个前端新手怕不记下来下回又又又找不到资料了🙃
                    前段时间写前端页面排版的时候又又又遇到了absolute导致的父元素高度塌陷的问题，以前代码写的少所以遇到问题就是查查查，问题解决后了一个漫长的学期后又遇到一样的问题又得重新查查查，所以这次索性总结一下。什么是高度塌陷？在文档流中，父元素的高度默认被子元素撑开的，也就是说子元素多高父元素就多高，但是当为我们子元素设置浮动以后，子元素就会完全脱离文档流，此时会导致子元素无法撑开父元素的高度，导致父元素的高度塌陷。由于父元素的高度塌陷，则父元素下的所有元素都会向上移动，导致页面的布局混乱。PS：因为pos
问题描述：父元素有position：relative  ；两个子元素都是position：absolute；（因为经常念叨父R子A习惯性布局）；
中间试了各种清除浮动的办法，均无法使父元素产生高度；
产生原因：因为position：absolute会脱离标准流，所以父元素无法自适应子元素高度，而清除...
特点： 传统的网页布局形式，页面上的所有元素的尺寸均使用px（像素）作为单位，当屏幕缩小的时候，会出现滚动条
优点 ：代码简单，编写容易，且无兼容性问题
缺点：无法根据不同的屏幕尺寸做出相应的表现
2、定位布局
特点： 使用 position 属性定义定位类型，并指定元素位置来布局
position部分属性：static、fixed、relative、absolute、sticky
使用 z-ind
				
浮动元素使其父元素高度塌陷我们经常会遇到一种情况，给一个元素设置浮动之后 float:left/right;，如果该元素的父元素有背景颜色，那么会发现父元素的背景颜色消失了；如果父元素有一个边框，那么浮动元素无法将边框撑开。
从以上两张图中可以看出添加浮动元素后，li元素按照规则横向排列，但是父元素却消失不见了。
为父元素添加一个5px的边框，在li元素添加浮动后，边框并没有被内容撑开。
在第一个示例中仿佛父元素消失了，但在第二个示例中发现其实父元素并没有消失，只是高度被计算为0。这就要回到浮动元素的特性来说明此问题“当元素设置浮动后，会自动脱离文档流”，翻译成白话就是说，元素浮动后
				
前一阵子上网得时候偶然间看到这样一个题：将一个页面均分成四等分。于是我顺手做了一下。以下是我的代码和效果： 
由于好奇心的作用，我把position：absolute属性删掉了，结果页面上啥也没有了。我不明白其中的原理，就去网上找了找资料并问了问朋友，到目前为止我的理解是这样的： 
  我们都知道absolute属性会使div脱离文档流，但是我没想到absolute这个属性脱离文档流能脱离的如此“干
				
绝对定位的元素完全从文档流当中移走，所以他们的尺寸无法影响到父元素的尺寸。
如果你真的想实现绝对定位还能撑开父元素，只能通过JavaScript实现：获取到绝对定位的子元素的高度，再设置给父元素。
或者，用 float: left / float:right 还有 margin 来调整位置，子元素再通过父元素设置的overflow:hidden来撑开父元素。
如果实在不懂，就把父元素的高度写死，只不过那啥了
				
当我们在代码中给子元素添加浮动或者绝对定位时，父元素会存在高度塌陷问题，可以使用JS来解决。
首先通过获取子元素的高度，将子元素的高度传给父元素，同时在页面窗口或框架被调整大小时获取子元素高度并传给父元素。代码如下：
        子元素.onload = function () {
          height = this.height;
          父元素.style.height = height + "px";
         window.onresize 
(二)  border
(三) padding
1.当设置padding将盒子撑大时，可box-sizing:border-box,此样式设置后盒子的大小为设置的宽高，此外值为content-box时设置的宽高为内容区的大小。
＃＃ 二、行内元素的盒模型
1.不能设置宽高
2.垂直方向属性的设置不影响整体布局
3.display:inline-block可将元素转换为行内块元素，既可以设置宽高，也不独占一行
block可设置为块元素
此外inline是转为行内元素
				
解决父元素高度塌陷的通常解决办法是在父元素中开启BFC。当子元素脱离文档流的原因是float，则可以通过开启BFC解决。但是如果子元素脱离文档流是因为absolute或者fixed，则开启BFC同样不管用。这种情况下，CSS没有办法解决，只能通过JS获取子元素的高度然后赋值给父元素来解决
        <div class="container" id="container">
            <div class="box" id="box" >
				
什么是高度塌陷？
当父元素未设置高度时，所有子元素浮动后，造成子元素脱离文档流进而无法把父元素撑开，父元素高度为0产生高度塌陷，称为高度塌陷问题。
父元素高度塌陷后，父元素以下的元素都会向上移动，导致布局混乱，所以我们要解决高度塌陷的问题。
如下代码：
<div class="box">
    <div class="div1">div1</div>...
在使用iSroll v4插件时，无法滚动到底部，从源码得知最大滚动位置由maxScrollY决定。从源码摘录出计算maxScrollY的部分
that.wrapperH = that.wrapper.clientHeight || 1;
that.scrollerH = m.round((that.scroller.offsetHeight + that.minScrollY) * that...
				
在CSS中，Position 属性经常会用到，主要是绝对定位和相对定位，简单的使用都没有问题，尤其嵌套起来，就会有些混乱，今记录总结一下。
1、相对定位( position: relative;)
如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。
relative：生成相对定位的元素，相对于其正常(原来)位置进行定位。
2、绝对定位（position: absolute;）
绝对定位使元素的位置与文档流无关，因此不占..
父元素的高度默认是被子元素撑开的，也就是子元素多高，父元素就多高。
但是当为子元素设置浮动以后，子元素会完全脱离文档流，此时将会导致子元素无法撑起父元素的高度，导致父元素的高度塌陷。
先上结论,清除浮动的方式：
1、给父元素添加overflow：hidden
2、在浮动元素下方添加空div，并给元素声明 clear：both
3、使用after伪类选择器清除浮动
4、父元素添加浮动
5、给父元素设定高度
一、父元素添加overflow：hid.