Html - 浮動：標誌上的左側標誌結果文字後標誌向上移動？

Question

我現在在學習html和css。無論如何，我正在學習一門課程，並且有一個queston。

這是BBC的標誌和文字我的示例代碼旁邊：http://i.imgur.com/kii6UPi.png

而一旦我添加浮動：左;標誌，文字向上移動：http://i.imgur.com/SIDrCVx.png

任何人都可以向我解釋爲什麼會發生這種情況？

Answer 1

這是因爲默認情況下，您的瀏覽器將圖像和文本渲染爲內聯元素，因此基線或圖像和文本的底部排隊。

當您將float：left應用於圖像時，它會強制圖像顯示爲塊而不是內聯，因此文本不會長與基線對齊。

Answer 2

你可以使用不同的div來控制它們。 <div class="wrapper"> <div>logo</div> <div>text</div> <div>你可以單獨控制它們，但也可以嘗試在文本上使用float：left，這可能會有所幫助。

Answer 3

簡而言之，默認情況下，HTML中的img將佔據高度佔據的整條線。

當您給元素賦予'float'屬性時，您會告訴它成爲頁面正常流的一部分，其他元素現在可以環繞它。

您可能希望在float property和inline-block