写项目的时候突然出现没有数据的时候竟然给我出现了滚动条，我灵机一动，发现事情并不简单。。
问题追踪：
子盒子没有把父盒子高度撑起来。
结构：
父盒子： 
子盒子： 
出现原因：
一般是,里面那层做了高度设置,如:height, overflow等，但是没有清除浮动
解决方案：
1. 方案一：（此处使用此方法，其实就是使用自适应布局）
在外层div样式添加两个标签(不能少) clear:both; overflow:auto;
2. 方案二
步骤1)给内层子元素添加浮动:
步骤2)在外层父元素内加 padding-top:
步骤3)在外层父元素加 overflow:hidden:
接下来就浅谈谈CSS3的四大自适应关键字。
前言：
一般地，有两种自适应：撑满空闲空间与收缩到内容尺寸。CSS3将这两种情况分别定义为'fill-availabel'和'fit-content'。除此之外 ，还新增了更细粒度的'min-content'和'max-content'。这四个关键字可用于设置宽高属性。
（注：IE不支持，webkit内核的浏览器需加上-webkit-前缀）
1. fill-availible：设置给子元素
从字面意义上讲，fill-available指的是 填充满可得到的空间，包括宽度和高度（充分利用可用空间），实际上，它的作用等价于我们经常使用的 100%，比如：width: 100%就等价于width: fill-available。它是一种外部尺寸，是由元素的父元素的size决定的值，比如父元素的width为100px，而它的子元素设为width: fill-available，那么该子元素的width最终将会与其父元素一致，都为100px，所以实际上fill-available是由外部尺寸决定的尺寸大小。
出现fill-available关键字值的价值在于，可以让元素的100%自动填充特性不仅仅在block水平元素上，也可以应用在其他元素
<head>
...
<style>
/* 父元素的样式 */
div.father{
height: 300px;
background-color: #f90;/* 黄色 */
}
/* 子元素的样式 */
div.child{
height: -webkit-fill-available;/* 子元素高度设为fill-available */
background-color: #1496bb;/* 蓝色 */
}
</style>
</head>
<body>
<div class="father">
<div class="child"></div>
</div>
</body>应用：利用fill-available可以轻松地实现等高布局
<style>
.inner{
width:100px;
height:-webkit-fill-available;
margin:0 10px;
display: inline-block;
vertical-align: middle;
background-color: pink;
}
</style>
<div style="height: 100px;">
<div class="inner">HTML</div>
<div class="inner">CSS</div>
<div class="inner">JS<br>jQyery<br>Vue</div>
</div>2.fit-content：设置给父元素
从语义上来讲正如大家所想的一样，它是 自适应内容 的属性值，其实它正如定义所讲般，它就是去适应内容的，所以这个属性值不难理解。
虽然它的效果和直接设置display: inline-block内联元素一样，但是并不局限于此，比如它可以和flex布局搭配使用，但是单纯的内联元素就做不到。
<head>
...
<style>
/* 父元素的样式 */
div.father{
height: fit-content;/* 给父元素施加fit-content */
background-color: #f90;/* 黄色 */
}
/* 子元素的样式 */
div.child{
height: 100px;
background-color: #1496bb;/* 蓝色 */
}
</style>
</head>
<body>
<div class="father">
<div class="child"> </div>
</div>
</body>
width:fit-content可以实现元素收缩效果的同时，保持原本的block水平状态，于是，就可以直接使用margin:auto实现元素向内自适应同时的居中效果了
应用：实现了块元素的动态宽度，保证在大盒子里面不超出大盒子，之后采用margin:auto;实现水平垂直居中~
<style>
div{
background-color: pink;
width:-webkit-fit-content;
margin:auto;
}
</style>
<div>小火柴的蓝色理想</div>3. max-content：设置给父元素
从字面意思上理解max-content就是使用 最大的内容，实际上这样讲是远远不够的，max-content的真正定义是：采用子元素中最大空间尺寸的那个元素的尺寸大小。
max-content：简单理解就是假设我们的容器有足够的宽度，足够的高度。如果将其应用在宽度上，那么就是采用内部元素宽度值最大的那个元素的宽度作为最终容器的宽度。如果出现文本，则相当于文本不换行。此时，所占据的宽度就是max-content所表示的尺寸。
<head>
<style>
div.father{
height: 300px;
border: 1px solid #aaa;
width: max-content;/* 给父元素施加max-content值 */
}
div.child1{
height: 100px;
background-color: #b22222;/* 红色 */
}
div.child2{
color: #fff;/* 白色 */
font-weight: bold;
background-color: #1496bb;/* 蓝色 */
}
</style>
</head>
<body>
<div class="father">
<div class="child1"></div>
<div class="child2">
正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测 试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试正在测试
</div>
</div>
</div>
</body>
4.min-content：设置给父元素
min-content 表示的并不是内部哪个宽度小就是那个宽度，而是，采用内部元素最小宽度值最大的那个元素的宽度作为最终容器的宽度；
如果是定宽定高的元素，例如图片，那么其最小宽度值就是图片呈现的宽度；对于文本元素，如果全部是中文，则最小宽度值就是一个中文的宽度值；如果包含英文，因为默认英文单词不换行，所以，最小宽度可能就是里面英文单词的宽度。
总结：width:min-content的最终宽度是图片和文字最小宽度值里面大的那一个。
<style>
.outer{
width: -webkit-min-content;
}
.child1{
height: 10px;
width: 100px;
background: lightgreen;
}
</style>
<div class="outer">
<div class="child1"></div>
<div>小火柴的蓝色理想, peace and love~</div>
</div>参考：
CSS3四个自适应关键字——fill-available、max-content、min-content、fit-content - M甲壳虫M - 博客园