Почему класс span перемещается?

Question

Почему изготовление spanfloat:left или display:inline-block или оба перемещаем span класс под профилемPic?

.content { 
 
    margin-top: 30px; 
 
    margin-left: 20px; 
 
    padding-bottom: 20px; 
 
    float: left; 
 
} 
 
.mainContent { 
 
    width: 1000px; 
 
    float: left; 
 
} 
 
.infoBit { 
 
    display: inline-block; 
 
    font-size: 1.1em; 
 
    padding-right: 10px; 
 
    padding-top: 10px; 
 
} 
 
.profilePic { 
 
    border: 1px blue solid; 
 
    height: 59px; 
 
    display: inline-block; 
 
    width: 44px; 
 
    margin: 0px; 
 
    float: left; 
 
    margin-right: 3px; 
 
} 
 
span { 
 
    margin-top: 0px; 
 
    float: left; 
 
}

<div class="content"> 
 
    <div class="mainContent"> 
 
    <div class="infoBit"> 
 

 
     <div class="profilePic"></div> 
 

 
     <span> \t Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam quis enim ut sapien sodales commodo. Fusce congue, elit a finibus fermentum, diam eros mollis massa, at eleifend sapien dui eget mauris. Donec nec diam enim. Vivamus commodo placerat risus vitae auctor. Cras leo elit, egestas eget dolor vitae, facilisis consequat sem. Mauris facilisis ipsum in porttitor ullamcorper. Nam vel massa sed quam venenatis facilisis. Quisque vitae mollis urna. In egestas nunc sed felis consequat, in malesuada dolor feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
 
    \t \t \t \t </span> 
 

 
     <div class="social"> 
 
     <div class="Like"></div> 
 
     <div class="Dislike"></div> 
 
     <div class="share"></div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

вы должны плавать только одна вещь
попробовать этот

CSS

.content 
{ 
    margin-top : 30px; 
    margin-left: 20px; 
    padding-bottom: 20px; 

} 

.mainContent 
{ 
    width: 1000px; 
    float: left; 
} 

.infoBit 
{ 

    display: inline-block; 
    font-size: 1.1em; 
    padding-right: 10px; 
    padding-top: 10px; 
} 

.profilePic 
{ 
    border:1px blue solid; 
    height: 59px; 
    display: inline-block; 
    width: 44px; 
    margin: 0px; 
    float: left; 
    margin-right: 3px; 
} 

span 
{ 
    margin-top: 0px; 

}