HTML float 和 absolute
block元素和inline元素在文檔流中的排列方式:
block元素通常被現實為獨立的一塊，獨占一行，多個block元素會各自新起一行，默認block元素寬度自動填滿其父元素寬度。block元素可以設置width、height、margin、padding屬性；
inline元素不會獨占一行，多個相鄰的行內元素會排列在同一行裏，直到一行排列不下，才會新換一行，其寬度隨元素的內容而變化。inline元素設置width、height屬性無效。
inline元素的margin和padding屬性: 水平方向的padding-left, padding-right, margin-left, margin-right都產生邊距效果；但豎直方向的padding-top, padding-bottom, margin-top, margin-bottom不會產生邊距效果。
文檔流: 指的是元素排版布局過程中，元素會自動從左往右，從上往下的流式排列。
脫離文檔流: 將元素從普通的布局排版中拿走，其他盒子在定位的時候，會當做脫離文檔流的元素不存在而進行定位。只有絕對定位absolute和浮動float才會脫離文檔流。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin:0;padding:0; } .outer{ background: gold; width: 200px; } .menu1{ width: 100px; height: 50px; float: left; } .menu2{ width: 100px; height: 50px; float: right; } .bottom{ width: 200px; height: 50px; background-color: pink; } </style> </head> <body> <div class="outer"> <div class="menu1">菜單一</div> <div class="menu2">菜單二</div> <div style="clear:both"></div> </div> <div class="bottom">底部</div> </body> </html>
效果如下：
使用 overflow: hidden
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin:0;padding:0; } .outer{ background: gold; width: 200px; overflow: hidden; } .menu1{ width: 100px; height: 50px; float: left; } .menu2{ width: 100px; height: 50px; float: right; } .bottom{ width: 200px; height: 50px; background-color: pink; } </style> </head> <body> <div class="outer"> <div class="menu1">菜單一</div> <div class="menu2">菜單二</div> </div> <div class="bottom">底部</div> </body> </html>
效果如下：
position(定位)
一、static
static 默認值，無定位，不能當作絕對定位的參照物，並且設置標簽對象的left、top等值是不起作用的的。
二、position: relative／absolute
relative 相對定位。
相對定位是相對於該元素在文檔流中的原始位置，即以自己原始位置為參照物。有趣的是，即使設定了元素的相對定位以及偏移值，元素還占有著原來的位置，即占據文檔流空間。對象遵循正常文檔流，但將依據top，right，bottom，left 等屬性在正常文檔流中偏移位置。而其層疊通過z-index屬性定義。
註意：position：relative的一個主要用法：方便絕對定位元素找到參照物。
absolute 絕對定位。
定義：設置為絕對定位的元素框從文檔流完全刪除，並相對於最近的已定位祖先元素定位，如果元素沒有已定位的祖先元素，那麽它的位置相對於最初的包含塊（即body元素）。元素原先在正常文檔流中所占的空間會關閉，就好像該元素原來不存在一樣。元素定位後生成一個塊級框，而不論原來它在正常流中生成何種類型的框。
重點：如果父級設置了position屬性，例如 position:relative; 那麽子元素就會以父級的左上角為原始點進行定位。這樣能很好的解決自適應網站的標簽偏離問題，即父級為自適應的，那子元素就設置position:absolute; 父元素設置 position:relative;，然後Top、Right、Bottom、Left用百分比寬度表示。另外，對象脫離正常文檔流，使用top，right，bottom，left等屬性進行絕對定位。而其層疊通過z-index屬性定義。
總結：參照物用相對定位，子元素用絕對定位，並且保證相對定位參照物不會偏移即可。
三、position:fixed
fixed：對象脫離正常文檔流，使用top，right，bottom，left等屬性以窗口為參考點進行定位，當出現滾動條時，對象不會隨著滾動。而其層疊通過z-index屬性 定義。 註意點： 一個元素若設置了 position:absolute | fixed; 則該元素就不能設置float。這 是一個常識性的知識點，因為這是兩個不同的流，一個是浮動流，另一個是“定位流”。但是 relative 卻可以。因為它原本所占的空間仍然占據文檔流。在理論上，被設置為fixed的元素會被定位於瀏覽器窗口的一個指定坐標，不論窗口是否滾動，它都會固定在這個位置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div1{
height: 1500px;
background-color: #cc3399;
}
.div2{
height: 1500px;
background-color: aquamarine;
}
a{
position: fixed;
bottom: 20px;
right: 20px;
}
</style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<a>返回頂部</a>
</body>
</html>效果如下：
HTML float 和 absolute