Ignoring text height using float left doesn't work, but right does

Question

I want to make a model box using html and css. So I made a nested div and used the top left to position the .it correctly. here's jsfiddle preview.

but when I added the text to the divs, the vertical alignments change, and that’s not what I want. Be that as it may, the text is correctly placed on the left side as I want.

as my experience, I gave a float value, so the div should ignore span height.it tags works when I use float:right, but not float:left.as you can see when I use the correct text on the right correctly, but why not?

, . ? , divs

html code

  <div class="squ">
    <div id="sone" class="margina">
    <span class="boxtext">margin</span>
        <div id="stwo" class="margina">
           <span class="boxtext">border</span>
            <div id="sthree" class="margina">
              <span class="boxtext">padding</span>
                <div id="sfour" class="margina">
                   <span class="boxtext">elem</span>
                </div>
            </div>
        </div>
    </div>

css

.boxtext{
    display:inline;
    float:left;
    color:#FFF;
}

Answer 1

, .margina position:relative;. top left, - , . absolute, :

JSFiddle

.margina{
    position:absolute;
    top:20px;
    left:30px;
}

, , top left div .margina. overflow:hidden , :

JSFiddle

.margina{
    overflow:hidden;
    position:relative;
    top:20px;
    left:30px;
}

Answer 2

margina textbox . , , , . , float: right , , .