html float换行了,float布局的元素为什么会换行，如何解决

如图所示：

代码如下：

Title

.main{

width:740px;

margin:0 auto;

position: relative;

background:lightsalmon;

height:800px;

}

.wrap{

position: absolute;

left: 50%;

bottom: 4px;

color: #9DA2AD;

z-index: 3;

padding: 0px 16px;

height: 24px;

border-radius: 16px;

background: lightblue;

transform:translateX(-50%);

}

.wrap div{

line-height: 24px;

float:left;

}

sample text

left2 content left2

left31 left31 left31 left31 left31

left32

left33

left4 content