Firefox float的行為不同於Chrome和IE

Question

我正在建立一個網站，並且在div的右側浮動了一個圖像，在左側浮動了一些文本，這是我之前做過的很多次。 但是，由於某些原因，圖像在FF中並沒有完全浮動到右側，而是在Chrome和IE / Edge中。 這可能確實很明顯，但是有什么見解嗎？

火狐瀏覽器

Chrome / IE

的HTML

<div class="wrapper">
    <img src="http://www.chriswickham.co.uk/gohard/img/workouts/hammer_curl.png" height="85%" style="float:right;padding-left:40px"/>
    <h1>Hammer Curl</h1>
    <h2>Arms</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dignissim ut mauris in vehicula. Suspendisse sodales nec quam in convallis. In quis ante eros. Pellentesque id lacus et massa tempor hendrerit.</p>
    <div style="clear:both"></div>
</div>

的CSS

.wrapper {
   margin: 0px auto;
   width: 1000px;
   padding: 20px 0px;
 }

Answer 1

您應該將文本和標題元素組合在一起，並為其提供寬度。

從您提供的摘錄中，看起來兩個屏幕截圖實際上都在遵循您提供的規則-兩者都將圖像浮動在文本的右側。

但是，沒有關於應該多遠的規范-距文本多遠（左40px填充）以及整個條目應多大（“包裝” @ 1000px）；

嘗試這個：

<div class="wrapper">
    <img src="http://www.chriswickham.co.uk/gohard/img/workouts/hammer_curl.png" height="85%" style="float:right;padding-left:40px"/>
    <div class="content">
       <h1>Hammer Curl</h1>
       <h2>Arms</h2>
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer dignissim ut mauris in vehicula. Suspendisse sodales nec quam in convallis. In quis ante eros. Pellentesque id lacus et massa tempor hendrerit.</p>
    </div>
   <div style="clear:both"></div>
</div>

的CSS

.content {
    width: 700px // or whatever you want to set it to
}

通過將非圖像元素包裝在一起，並為它們專門指定寬度，您應該能夠在大多數瀏覽器中保持相同的體驗。

編輯：修復了一些格式。