line-height对浮动的影响

Question

代码：

<div class="header-wrapper">  
        <div class="fr">  
            <button id="btnMore">  
                <div class="i-line"></div>  
                <div class="i-line"></div>  
                <div class="i-line"></div>  
            </button>  
        </div>
<div>


.header-wrapper {
    height: 50px;
    line-height: 50px;
    background: #3c3f41; 
    position: relative;
}

.fr {
    float: right;
}

#btnMore {
    width: 40px;
    height: 30px;
    padding: 1px 13px;
    
}

问题：
    为什么元素向右浮动之后，它的高度会被父元素的line-height控制

Answer 1

float 是先让 text 和 inline 元素把这个元素包起来，再把这个元素抽离正常流，所以会受 line-height 影响。