MDN说法：
max-height 这个属性会阻止 height 属性的设置值变得比 max-height 更大。
max-height 属性用来设置给定元素的最大高度. 如果height 属性设置的高度比该属性设置的高度还大,则height 属性会失效.
max-height 重载（覆盖掉） height, 但是 min-height 又会重载（覆盖掉） max-height.
实际效果：
当 height 和 max-height一起使用时，谁小听谁的
max-height < height 元素高度： max-height
height < max-height 元素高度： height
当 height,max-height,min-height一起使用时
height > max-height > min-height 元素高度：max-height
height > min-height > manx-height 元素高度：min-height
min-height > height > max-height 元素高度：min-height
范例：
html
<html lang="en">
<head>
<meta charset="UTF-8">
<title>max-height、 min-height、 height 一起使用</title>
<style>
ul{
list-style:none;
padding:0;
}
.clearfix{
clear:both;
content:'';
display: block;
}
.clearfix:after{
content:'';
clear:both;
display:block;
}
.clearfix{
zoom:1;
}
.fl {
float:left;
display:inline;
}
.fr {
float:right;
}
.wrap{
width:200px;
margin-left:20px;
}
.box{
height:500px;
background-color:#e64c65;
}
.box2{
height:500px;
max-height:300px;
background-color:rgb(169, 173, 233);
}
.box3{
height:500px;
max-height:600px;
background-color:rgb(199, 69, 166);
}
.box4{
height:500px;
max-height:300px;
min-height:200px;
background-color:#ccc;
} .box5{
height:500px;
max-height:300px;
min-height:400px;
background-color:#ccc;
}
.box6{
height:500px;
max-height:300px;
min-height:600px;
background-color:#ccc;
} </style>
</head>
<body>
<div class="clearfix">
<div class="box wrap fl">
<ul>
<li>原：width:200</li>
<li>原：height:500</li>
<li>实：width:100</li>
<li>实：height:500</li>
</ul>
</div>
<div class="box2 wrap fl">
<ul>
<li>原：width:200</li>
<li>原：height:500</li>
<li>原：max-height:300</li>
<li>实：width:100</li>
<li>实：height:300</li>
</ul>
</div>
<div class="box3 wrap fl">
<ul>
<li>原：width:200</li>
<li>原：height:500</li>
<li>原：max-height:600</li>
<li>实：width:100</li>
<li>实：height:500</li>
</ul>
</div>
<div class="box4 wrap fl">
<ul>
<li>原：width:200</li>
<li>原：height:500</li>
<li>原：max-height:300</li>
<li>原：min-height:200</li>
<li>实：width:100</li>
<li>实：width:300</li>
</ul>
</div>
<div class="box5 wrap fl">
<ul>
<li>原：width:200</li>
<li>原：height:500</li>
<li>原：max-height:300</li>
<li>原：min-height:400</li>
<li>实：width:100</li>
<li>实：width:400</li>
</ul>
</div>
<div class="box6 wrap fl">
<ul>
<li>原：width:200</li>
<li>原：height:500</li>
<li>原：max-height:300</li>
<li>原：min-height:600</li>
<li>实：width:100</li>
<li>实：width:600</li>
</ul>
</div>
</div> </body>
</html>
效果：
参考链接：https://developer.mozilla.org/zh-CN/docs/CSS/max-height
作者：smile.轉角
QQ：493177502