老师请问下高度的问题

ABOUT区域下半区图文交错显示代码如下：

html:

<div class="bottom">

<ul>

<li class="img">

<img src="images/b1.jpg" alt="">

</li>

<li class="desc">

<div class="library">

<h2>Library</h2>

<p class="desc1">

Lorem Ipsum is simply dummy text of the printing and typesetting industry

</p>

<p class="desc2">

Lorem Ipsum has been the industry's standard dummy<br>text ever since the 1500s,when an unknown printer<br>took a gallery of type and scrambled it to make a type specrimen book.

</p>

</div>

<div class="explore">

<input type="button" value="EXPLORE">

</div>

</li>

<li class="img">

<img src="images/b2.jpg" alt="">

</li>

<li class="desc">

<div class="computer">

<h2>Computer Lab</h2>

<p class="desc1">

Lorem Ipsum is simply dummy text of the printing and typesetting industry

</p>

<p class="desc2">

Lorem Ipsum has been the industry's standard dummy<br>text ever since the 1500s,when an unknown printer<br>took a gallery of type and scrambled it to make a type specrimen book.

</p>

</div>

<div class="explore">

<input type="button" value="EXPLORE">

</div>

</li>

<li class="desc">

<div class="hall">

<h>Conference Hall</h1>

<p class="desc1">

Lorem Ipsum is simply dummy text of the printing and typesetting industry

</p>

<p class="desc2">

Lorem Ipsum has been the industry's standard dummy<br>text ever since the 1500s,when an unknown printer<br>took a gallery of type and scrambled it to make a type specrimen book.

</p>

</div>

<div class="explore">

<input type="button" value="EXPLORE">

</div>

</li>

<li class="img">

<img src="images/b3.jpg" alt="">

</li>

<li class="desc">

<div class="ground">

<h2>Play Ground</h2>

<p class="desc1">

Lorem Ipsum is simply dummy text of the printing and typesetting industry

</p>

<p class="desc2">

Lorem Ipsum has been the industry's standard dummy<br>text ever since the 1500s,when an unknown printer<br>took a gallery of type and scrambled it to make a type specrimen book.

</p>

</div>

<div class="explore">

<input type="button" value="EXPLORE">

</div>

</li>

<li class="img">

<img src="images/b4.jpg" alt="">

</li>

</ul>

</div>

</div>

CSS:

.about .bottom{

margin-top: 80px;

overflow: hidden;

zoom:1;

}

.about .bottom>ul>li{

list-style: none;

float: left;

width: 25%;

/*height: 380px;*/

}

.about .bottom>ul>li>img{

width: 100%;

height: 100%;

}

.about .bottom ul .desc{

background-color: #07cbc9;

padding:20px 30px 0 30px;

box-sizing: border-box;

color: #fff;

overflow: hidden;

}

.about .bottom ul .desc h2{

font-weight: normal;

}

.about .bottom ul .desc .desc1{

margin-top: 20px;

margin-bottom: 20px;

font-size: 15px;

}

.about .bottom ul .desc .desc2{

font-size: 12px;

}

/*EXPLORE父div填满li剩余高度*/

.about .bottom ul .desc .explore{

height: 184px;

width: 100%;

position: relative;

/*background-color: yellow;*/

}

/*input修改成块级元素设置绝对定位使其垂直水平居中*/

.about .bottom ul .desc .explore input{

width: 103px;

height: 45px;

font-size: 15px;

background-color: black;

color: white;

border:none;

display: block;

position: absolute;

top:0;

bottom: 0;

left: 0;

right: 0;

margin:auto;

}

.about .bottom ul .desc input:hover{

background-color: transparent;

border:2px solid black;

cursor: pointer;

}

我的问题是，为什么li在没有设置高度的情况下排列会混乱，而且是在图文交错的情况下，我试了全是图片或者全是文字都不会乱，请问老师这是什么原理呢?