html - 向左浮动与向右浮动 - 为什么顺序会改变？

Question

HTML:

<img src="http://2.bp.blogspot.com/-lUl0ztniLKk/Vhhjg7WWPJI/AAAAAAAAAJI/PgYEmoSNKRU/s400/Author.gif" alt="Author photo">
<p class="author-text">Jackson Gonzalez</p>

CSS:

 img {
    height: 100px;
    width: 100px;
    border-radius: 50%;
    float: left;
}
.author-text {
    font-size: 22px;
    float: left;
}

如果我有 float ，顺序对我来说很有意义..因为首先是图像然后是文本。但是当我从左到右改变 float 时..首先显示文本然后显示图像？..为什么顺序会改变？...

左:https://codepen.io/psj01/pen/YrgKLy右:https://codepen.io/psj01/pen/KXEPoQ

Answer 1

如果它们都在左边，图像先向左推，然后文本像你说的那样向左推。这对于权利也是一样的。图像一直被推到右边，然后文本被推到右边，基本上撞到图像上。

第一个元素首先被推向它各自的方向，然后是第二个元素。当您将 float 更改为右侧时，您基本上只是在反转方向。它们按照它们在 CSS 中的布局顺序沿 float 方向单独移动，但不会相互传递。