为什么元素浮动之后，文字会环绕在周边，而不是跟浮动元素重合？

今天在切图的时候遇到一个问题：

                                                  

<div class="header">
	<div class="arrow_left"></div>
	<div class="class_name">{{cname}}</div>
</div>

第一个想法是用向左浮动

.header{
    text-align:center
}
.left_arrow{
    float:center;
    margin:5px;
}

但是发现class_name的宽度虽然确实是100%，但是div中的文字受到兄弟的影响，不能居中。

                                          

原因：浮动元素虽然脱离文档流，但是会保持文字环绕。

参考原博：https://blog.csdn.net/cxl444905143/article/details/17361045#commentBox

解决办法：用绝对定位

.header{
    position:relative;
    text-align:center;
}
.left_arrow{
    position:absolute;
    margin:5px;
}