浮動元素後元素的位置和尺寸

我使用float：left和可預測的方式對圖像右側的文本進行了樣式化（如果有幫助，這種情況的上下文是標識和標題旁邊的標題）。浮動元素後元素的位置和尺寸

當我看到標題元素（h1）時，它佔用圖像後面的空間（重疊）。文字仍然在圖像旁邊，但h1元素的背景與圖像重疊。

<div id="header"> 
    <a href="index.html"><img src="logo2.png" /></a> 
    <h1>AlanHoRizon</h1> 
    <p> 
... 
#header img { 
    float: left; 
}

這是浮動應該如何工作？背景是CSS框模型中填充的同義詞嗎？如果我希望標題元素在圖像之後完全開始，包括背景（這正是我期望float實際執行的操作）。

實際上並沒有影響到標題的外觀，因爲所有東西都是應該顯示的，但我很好奇，因爲它會增加我對html和css網頁設計的理解。

謝謝。

來源

2011-05-29 Alan

你可以把你的code.so我可以幫你 – Anish 2011-05-29 09:57:15

HTML：

<div id="header"> 
    <a href=""><img id="logo" src="http://lorempixum.com/100/100/abstract" alt="" /></a> 
    <div> 
     <h1>AlanHoRizon</h1> 
     <h3>Site description</h3> 
    </div> 
</div> 
<div id="content"> 
    <p>Lorem ipsum dolor ...</p> 
</div>

CSS：

#header:after { 
    display: block; 
    clear: both; 
    content: "."; 
    visibility: hidden; 
    height: 0; 
    line-height: 0; 
} 
#logo { 
    float: left; 
} 
#header div { 
    float: left; 
    padding: .25em; 
}

而這裏的complete jsfiddle example

來源

2011-05-29 12:56:58 NGLN

修改CSS代碼：

h1 
{ 
float:left; 
} 
img 
{ 
float:left; 
}

這應該工作。以下內容將生成圖像左側的標題。

來源

2011-05-29 10:09:16

有趣的是，無論我讀了多少浮動，似乎我還沒有完全理解它是如何工作的。總是有新的東西來學習。如果我想添加一個位於標題下的網站描述，但仍然位於圖像的旁邊？這仍然有效嗎？ – Alan 2011-05-29 10:18:23

其實，我覺得我找到了一個回答我的問題。簡而言之，似乎這只是浮動行爲的工作原理。內容推過，但背景和邊框還是去浮背後：

http://phrogz.net/CSS/understandingfloats.html#ascolumns

我不知道如果填充是同義的背景，但我沒有測試頭元素「填充」僅僅通過使背景顏色變爲紅色，而背景確實在浮動背後。就css box模型而言，我還不確定發生了什麼。

來源

2011-05-29 20:12:53 Alan

浮動元素後元素的位置和尺寸

回答

相關問題