浮动也有优先级么？

Question

对，又是我，上次犯了最低级错误的那个。
问题是这样的：
想在三个a标签中间放置两个竖线，类似导航条的那样，在我设置好样式之后，却发现充当竖条的两个<div>浮动到了a标签的前面，什么鬼！
下面是我的样式及html：

<footer id="footer">
        <a class="btn" id="home" href="javascript:;"></a>
        <div class="line"></div>
        <a class="btn" id="share" href="javascript:;"></a>
        <div class="line"></div>
        <a class="btn" id="get" href="javascript:;"></a>
    </footer>

 .btn{
    margin: 0;
    padding: 0;
    display: inline-block;
    width: 100px;
    height: 100%;
}
.line{
    display: block;
    float: left;
    width: 1px;
    height: 30px;
    background-color: black;
    transform: translateY(20px);
    margin: 0px 20px;
    padding: 0px;
}

结果却是这样的：

请问这是什么问题呢？在此拜谢了！

ありがとうございました。

Answer 1

先说答案: a标签也需要设置浮动。
这个很好理解，甲和乙都在排队，甲挡在乙前面，乙为了插队就飞到甲前面去了，此时甲只能眼睁睁看着乙。但甲肯定不愿意啊，所以甲也要飞，继续挡在乙前面。

Answer 2

float 会脱离文档流，相当于飞起来了 :) 可以尝试用 border-right

Answer 3

别这么写，你可以看看别人的网站或博客，学习一下别人的代码