向左浮動與向右浮動-為什么順序會更改？

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;
}

如果我還有浮動，該命令對我來說就很有意義..因為首先是圖像，然后是文本。 但是，當我從左到右更改浮動時。.首先顯示文本，然后顯示圖像？..為什么順序更改？

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

Answer 1

如果它們都左，則首先將圖像向左推，然后像您說的那樣向左推文本。 右邊是一樣的。 圖像一直被推到最右邊，然后文本被推到右邊，基本上碰到了圖像。

首先將第一項推向其各自的方向，然后再執行第二項。 基本上，將浮動向右更改時，您只是在反轉方向。 它們按照在CSS中的排列順序分別沿浮動方向移動，但不會彼此通過。

Answer 2

與float: left相比， float: right只是簡單地反轉了水平順序，類似於從右到左書寫的語言。 第一項是右對齊，下一項是從右到左的順序，依此類推。

Answer 3

由於內容在HTML文件中的位置，因此CSS會將列出的第一項放置在指定的最遠位置。 如果您希望兩個項目都在右側，但是圖像在前（位於文本的左側），則可以嘗試以下兩個選項之一。 首先，只需將p標簽放在HTML中image標簽之前，如下所示：

<p class="author-text">Jackson Gonzalez</p>

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

或者，您可以將兩個元素都放在div標記內，並在它們上保留相同的float左屬性，然后將整個div容器向右浮動。 像這樣：

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>

<div>  

CSS文件

div {
  float: right;
} 

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

我在您的代碼筆鏈接中嘗試了這兩個選項。 使用div作為容器放置對象來玩。 希望這可以幫助！

Answer 4

序列1是因為img元素首先被渲染並首先在文本之前保持在最左位置；

序列2由於相同的原因：img元素首先被渲染，並且首先在文本之前位於最右邊。