为什么box-2来自右边而不是底部

Question

我试图了解CSS布局的工作原理。我有一些HTML和CSS，如下面的链接所示。图片的上半部分和下半部分之间的唯一区别在于，在id为导航侧的div中，下半部分中有role =“navigation”。

问题：在下半部分，为什么盒子在右侧而不是在id导航侧的div下面？ CSS中的哪些行会影响此框的位置？它是否跟随线？

[role=navigation] {
    -webkit-box-sizing: border-box;
    -webkit-font-smoothing: antialiased
}
[role=navigation] {                                                                                                                                                
    *zoom: 1;
    user-select: none;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding-top: 20px;
    position: relative
}

如果是，它究竟是如何运作的？

https://jsfiddle.net/mor5r1hu/