解决高度塌陷方案二

我们在进行页面布局的时候可以发现元素在脱离文档流后，就会出现高度塌陷问题。

一、什么是高度塌陷？

通过下面的例子了解什么是高度塌陷。

在页面中设置一个盒子box，其中在嵌套一个子元素小盒子box1。box设置边框宽度，而高度不去设置（高度会由内容撑开）

但是当我们向盒子里面添加内容的时候

,就可以发现父元素被撑开了。

在文档流定位中，父元素的高度默认是被子元素撑开的高度。即子元素的高度就是父元素的高度。

当为父元素中的子元素设置了向左浮动时。比如说为box1设置向左浮动。就会发现子元素的位置没变，但是父元素box发生了高度坍塌。

得出结论：当为子元素设置浮动的时候，子元素就会完全脱离文档流，此时将会导致子元素无法撑开父元素，导致父元素的高度塌陷。

当再在父元素之下设置一个盒子box2，为box2设置高度80px和背景颜色。

按理来说正常情况下，按照文档流排列，会是box的边框包裹着box1，box2在二者下方，如图一所示。

为box1设置浮动定位后，box1会脱离文档流，如上所示父元素随即会出现高度塌。这时候，box2盒子也会向上移动，造成布局混乱。如图二所示。

高度塌陷所造成的后果：由于父元素的高度塌陷，就会导致父元素之下的所有元素都会因此而向上移动，这样会导致页面混乱。不利于页面布局。

解决高度坍塌问题：

方案一：直接为父元素指定高度，假设子元素是200px，那么就为父元素的高度也设置为200px；以避免塌陷问题的出现。

缺点：一旦指定父元素的高度为一个固定值。父元素的高度不会自动适应子元素的高度，所以这种解决方法不推荐使用。

我们了解完高度坍塌问题之后，那么如何去解决高度坍塌问题呢？

解决高度问题的方法一：

解决问题的原理：根据W3C标准，元素都有一个隐含的属性（Block Formatting Context）简称BFC,块级格式化环境，该属性可以设置打开或是关闭，当开启BFC后，元素将会具有如下特性：

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

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

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

如何开启BFC（并没有直接开启BFC的方法，但是在操作的过程中可以通过一些间接的元素设置开启浮动）

1.设置元素浮动

当子元素box1设置了浮动定位的时候，同时也给父元素box也设置浮动定位。结果发现虽然父元素的高度被撑开了，但是如果没有设置宽度，原有的默认占据一行的宽度就失效了（宽度变成被子元素撑开的元素了），而box2盒子依旧往上移动了。不推荐使用

2.设置元素绝对定位

给父元素设置绝对定位后，原有的默认宽度失效（变成被子元素撑开的宽度了），box2盒子依旧向上移动。不推荐使用

3.设置元素inline-block

子元素box1 保持float:left 的浮动定位，为父元素box设置display:inline-block变成行内块元素，box2盒子不再上移，但是原有的默认宽度失效（变成被子元素撑开的宽度）不推荐使用

4.将元素的over-flow（超出部分）设置成一个非visible的值

回忆over-flow属性的值有visible（默认值）、hidden、scroll、auto。非visible的值有hidden、scroll、auto。

首先尝试一下把box父元素设置为 overflow:scroll；宽度被保留了下来，高度也被子元素撑开，box2盒子也没有趁机上移，页面布局也很完美。但是scroll属性值带有的滚动条却很碍眼。尝试其他属性值试试。

设置父元素属性overflow: auto;效果完美

父元素overflow: hidden;

推荐方式：将overflow设置为hidden开启BFC最简便的方式，解决overflow最简便的方式就是设置overflow:hidden;

浏览器兼容：这样设置，Chrome浏览器支持，Firefox浏览器支持，IE浏览器IE6版本及以下的浏览器不支持这种设置。所以使用这种方式不能兼容IE6及其以下的版本。

在IE6中虽然没有BFC，但是有另一隐含属性hasLayout，如果想开启hasLayout，直接设置元素zoom为1即可。（zoom：表示放大，后面跟着放大倍数的数值；zoom：1表示不放大）zoom只在IE浏览器中支持，其他浏览器都不支持。

如果下想同时兼容所有版本的浏览器可以两种方式都写，既有overflow又有zoom。

解决高度塌陷结局方法之二

在了解这个方法之前，先来简单回顾一下clear属性（只能清除兄弟元素的影响，不能清除父元素的影响）

clear清除属性的取值：

none：不清除浮动；

left：左侧不允许出现浮动，清除左侧浮动元素对当前元素产生的影响；

right：右侧不允许出现浮动，清除右侧浮动元素对当前元素产生的影响；

both：清除对元素影响最大的浮动。

清楚了clear属性清除的用法之后，就可以运用到解决高度塌陷。

当为父元素中的子元素设置了向浮动时。为box1设置向左浮动。就会发现子元素的位置没变，但是父元素box发生了高度坍塌

为box1盒子的兄弟元素box2 设置clear属性

解决高度塌陷方案二：

优点

可以直接在高度塌陷的父元素最后添加一个空白的div，由于这个div并没有设置浮动，所以他可以撑开父元素的高度的。

再对其进行清除浮动（clear），通过这样可以通过这个空白的div来撑开父元素的高度。

相比于上面的使用overflow属性清除浮动，更加建议使用此方案，副作用相对而言更少（基本没有），而且可以兼容所有的浏览器。

缺点：

因为div属于HTML元素，HTML属于结构部分，所以使用这种方式虽然可以解决问题，但是会在页面中添加多余的结构。

假如既不想添加结构，又希望可以解决高度塌陷问题

解决办法：通过after伪类，选中box父元素的后边。

可以通过after伪类向元素的最后添加一个空白的块元素，然后对其清除浮动。这样做和添加div原理一样，可以达到一个相同的效果。

而且不会在页面添加多余的div（结构），最推荐使用的方式，几乎没有副作用。

使用clearfix属性，清除修复。

给box添加一个clearfix的属性

设置clearfix属性值，其中最为关键的三点是：

这是最推荐使用的一种方式。但是在IE6中不支持 :after伪类。如果想在IE6中显示开启hasLayout，设置zoom:1。

三种 Loading 制作方案

一、简介

Loading几乎是每个应用都会用到的一个组件。很多组件库都会提供相应的Loading组件，但是有的时候我们可能需要自定义Loading效果，掌握Loading组件制作的基础知识将变得非常必要。Loading主要就是一个旋转的圆环，而旋转部分则比较简单，直接通过CSS动画即可实现，所以关键部分就是得到Loading的圆环。

二、通过border-radius绘制圆环

我们通常让一个元素变成圆形是先将一个元素设置为长和宽相等的正方形，然后给这个元素设置一个border-radius值为50%。需要注意的是，border-radius: 50%是让整个正方形元素都变成圆形，即包括边框和内容区。所以我们可以通过控制元素边框和内容区的大小，将元素的内容区域作为内圆，将元素的边框区域作为外圆，从而绘制出一个圆环。

.loading-css {    width: 50px; /*先将loading区域变成正方形*/    height: 50px;    display: inline-block; /*将loading区域变成行内元素，防止旋转的时候，100%宽度都在旋转*/    border: 3px solid #f3f3f3; /*设置四周边框大小，并将颜色设置为浅白色*/    border-top: 3px solid red; /*将上边框颜色设置为红色高亮，以便旋转的时候能够看到旋转的效果*/    border-radius: 50%; /*将边框和内容区域都变成圆形*/}

此时效果如下:

圆环效果已经出来了，接下来让圆环旋转起来即可，如:

@keyframes loading-360 {    0% {        transform: rotate(0deg); /*动画起始的时候旋转了0度*/    }    100% {        transform: rotate(360deg); /*动画结束的时候旋转了360度*/    }}.loading-css { /*在之前的CSS中加上动画效果即可*/    animation: loading-360 0.8s infinite linear; /*给圆环添加旋转360度的动画，并且是无限次*/}

二、通过svg来绘制圆环

SVG 意为可缩放矢量图形（Scalable Vector Graphics），其使用 XML 格式定义图像， 标签可用来创建一个圆，同时外面必须嵌套一个

.loading-svg {    width: 50px; /*设置svg显示区域大小*/    height: 50px;}

标签的width和height设置的是svg图形可显示区域大小。而viewBox表示的是截取图形的区域，因为矢量图的绘制区域可以是无限大的，具体绘制在哪里根据具体的设置而定，比如上面的circle就绘制在圆心坐标为(25,25)，半径为20的圆形区域中，而viewBox设置为0 0 50 50，表示截图区域为左上角坐标为(0, 0)，右下角坐标为(50,50)的矩形区域内，即会截取这个区域内的矢量图，然后将截取的矢量图放到svg的可显示区域内，同时会根据svg可显示区域的大小等比例进行缩放，但是截取的图片必须在svg可显示区域内完整显示。

假如，现在讲svg的大小设置为60px，如:

.loading-svg {    width: 60px; /*设置svg显示区域大小*/    height: 60px;}

如上分析，viewBox截图区域中，绘制的圆的圆心正好在截图区域的中心，所以截图区域四周边框与绘制的圆之间有5px的距离，而圆的半径为20px，所以比例为1:4，现在将svg显示区域变为60px，所以也需要将截图区域等比例放大并占满整个svg显示区域，截图区域经过拉伸后，圆心位置变为了(30,30)，即半径变为了30，按1:4比例，半径变为24，外围变为了6，所以整个圆也会跟着变大。

需要注意的时候，绘制的圆目前是看不到的，因为没有给画笔设置上颜色，如:

.path {    stroke: #409eff; /*给画笔设置一个颜色*/    stroke-width: 2; /*设置线条的宽度*/}

此时可以看到绘制出的圆环了。为了给圆环添加转动效果，我们需要绘制带缺口的圆环，后面通过改变缺口的位置大小来实现转动效果，如:

.path {    stroke-dasharray: 95, 126; /*设置实现长95，虚线长126*/    stroke-dashoffset: 0; /*设置虚线的偏移位置*/}

如图所示，圆环的绘制起点是在水平方向最右边的那个点，然后进行顺时针绘制。因为该圆环的周长为23.1420=125.6，约等于126，stroke-dasharray设置了实线(可见部分)长为95，约等于圆的3/4，所以只能绘制到圆环的最高点位置，接下来是126的虚线，但是圆环周长只有126，所以只能显示31的虚线。可以看做是一根无限循环的水平线条，实线(-221,0)---虚线(-126,0)---目前起点为(0,0)---实线(95,0)---虚线(221,0)---实线(316,0)，然后让水平线的起点(0,0)位置与圆环的起点位置重合，水平线顺时针沿着圆环绕即可，随着stroke-dashoffset起点位置的偏移，左侧的(-126,0)的虚线就可以慢慢显示出来。当stroke-dashoffset值为负数的时候，上面的线往右拉，当stroke-dashoffset值为正数的时候，下面的线往右拉。

接下来就是添加圆环的转动效果，分别设置三个动画状态，如:

// 0%{    stroke-dasharray: 1, 126; /*实线部分1，虚线部分126*/    stroke-dashoffset: 0; /*前面1/126显示实线，后面125显示空白*/}

从圆环最右边作为起点绘制1个像素的距离的实线，接下来绘制126像素的虚线(空白)，因为圆周长为126，所以剩余部分全部为空白，如图所示，

// 50%{    stroke-dasharray: 95, 126; /*实线部分95，虚线部分126*/    stroke-dashoffset: -31px; /*顺时针偏移31/126，即前31/126显示空白，后面3/4显示线条*/}

从圆环的最右边作为起点，并且顺时针移动31像素，即圆环的1/4，所以实线起点变为了圆环的最底部，实线长度为95像素，即圆环的3/4，如图所示，

// 100%{    stroke-dasharray: 6, 120; /*实线部分6，虚线部分120*/    stroke-dashoffset: -120px; /*最后顺时针偏移120/126，即前120/126显示空白，后面6点显示线条部分*/}

从圆环的最右边作为起点，并且顺时针移动120像素，所以实线长度仅剩下6像素了，如图所示，

给圆环加上动画效果，如:

.path {    animation: loading-dash 1.5s ease-in-out infinite;}@keyframes loading-dash {    0% {        stroke-dasharray: 1, 126; /*实线部分1，虚线部分126*/        stroke-dashoffset: 0; /*前面1/126显示实线，后面125显示空白*/    }
    50% {        stroke-dasharray: 95, 126; /*实线部分95，虚线部分126*/        stroke-dashoffset: -31px /*顺时针偏移31/126，即前31/126显示空白，后面3/4显示线条*/    }
    to {        stroke-dasharray: 6, 120; /*实线部分6，虚线部分120*/        stroke-dashoffset: -120px; /*最后顺时针偏移120/126，即前120/126显示空白，后面6点显示线条部分*/    }}

为了让Loading动画更加生动细腻，我们还可以给svg标签也加上一个旋转动画，如:

.loading-svg {    width: 50px; /*设置svg显示区域大小*/    height: 50px;    animation: loading-rotate 1.5s infinite ease-in-out; /*给svg也加上一个旋转动画*/}@keyframes loading-rotate {    to {        transform: rotate(1turn); // 旋转1圈    }}

三、通过iconfont字体图标

我们可以直接通过iconfont字体图标代替圆环的绘制，直接以字体的形式显示出圆环，然后给其加上旋转动画即可，如：

我们可以在iconfont网站上下载喜欢的Loading图案。字体图标下载后，将解压后的内容拷贝到项目中，并引入其中的iconfont.css到页面中，给要显示字体图标的元素加上iconfont类样式，字体图标会有一个对应的unicode编码，通过::before设置content为该unicode编码即可显示对应的字体图标了，或者直接在unicode码前加上\&#x，并作为元素内容。



接下来让字体图标旋转起来即可，如:

.icon-loading {    animation: rotating 2s infinite linear;}@keyframes rotating {    0% {        transform: rotate(0deg) /*动画起始位置为旋转0度*/    }
    to {        transform: rotate(1turn) /*动画结束位置为旋转1圈*/    }}

如果觉得这篇文章还不错，来个【分享、点赞、在看】三连吧，让更多的人也看到~

点个『在看』支持下