BFC,定位，浮動，7種垂直居中方法
1、BFC與IFC
1.一、BFC與IFC概要
BFC（Block Formatting Context）即「塊級格式化上下文」， IFC（Inline Formatting Context）即行內格式化上下文。常規流（也稱標準流、普通流）是一個文檔在被顯示時最多見的佈局形態。一個框在常規流中必須屬於一個格式化上下文，你能夠把BFC想象成一個大箱子，箱子外邊的元素將不與箱子內的元素產生做用。html
BFC是W3C CSS 2.1 規範中的一個概念，它決定了元素如何對其內容進行定位，以及與其餘元素的關係和相互做用。當涉及到可視化佈局的時候，Block Formatting Context提供了一個環境，HTML元素在這個環境中按照必定規則進行佈局。一個環境中的元素不會影響到其它環境中的佈局。好比浮動元素會造成BFC，浮動元素內部子元素的主要受該浮動元素影響，兩個浮動元素之間是互不影響的。也能夠說BFC就是一個做用範圍。node
在普通流中的 Box(框) 屬於一種 formatting context(格式化上下文) ，類型能夠是 block ，或者是 inline ，但不能同時屬於這二者。而且， Block boxes(塊框) 在 block formatting context(塊格式化上下文) 裏格式化， Inline boxes(塊內框) 則在 Inline Formatting Context(行內格式化上下文) 裏格式化。chrome
1.二、如何產生BFC
當一個HTML元素知足下面條件的任何一點，均可以產生Block Formatting Context：
a)、float的值不爲none瀏覽器
b)、overflow的值不爲visibleide
c)、display的值爲table-cell, table-caption, inline-block中的任何一個佈局
d)、position的值不爲relative和static字體
CSS3觸發BFC方式則能夠簡單描述爲：在元素定位非static,relative的狀況下觸發，float也是一種定位方式。url
1.三、BFC的做用與特色
a)、不和浮動元素重疊，清除外部浮動，阻止浮動元素覆蓋spa
若是一個浮動元素後面跟着一個非浮動的元素，那麼就會產生一個重疊的現象。常規流（也稱標準流、普通流）是一個文檔在被顯示時最多見的佈局形態，當float不爲none時，position爲absolute、fixed時元素將脫離標準流。
沒有BFC的狀況：
示例代碼：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>BFC與IFC</title> <style type="text/css"> #div1{ width: 200px; height: 200px; background: lightgreen; float: left; } #div2{ width: 300px; height: 300px; background: lightblue; } </style> </head> <body> <h2>BFC與IFC</h2> <div id="div1">div1 </div> <div id="div2">div2 </div> </body> </html>
運行結果：
此時的div1由於float已經產生了BFC，在div2中添加樣式overflow:hidden讓其產生BFC，代碼以下：
#div2{
width: 300px;
height: 300px;
background: lightblue;
overflow: hidden;
}
運行結果：
b)、清除元素內部浮動，計算浮動元素的高度
只要把父元素設爲BFC就能夠清理子元素的浮動了，最多見的用法就是在父元素上設置overflow: hidden樣式，對於IE6加上zoom:1就能夠了(IE Haslayout)。
當一個元素的內部元素浮動時不會計算其高度，示例以下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>BFC與IFC</title> <style type="text/css"> #div0 { border: 2px solid lightsalmon; padding: 20px; width: 400px; } #div1 { width: 200px; height: 200px; background: lightgreen; float: left; } #div2 { width: 200px; height: 200px; background: lightblue; float: left; } </style> </head> <body> <h2>BFC與IFC</h2> <div id="div0"> <div id="div1">div1 </div> <div id="div2">div2 </div> </div> </body> </html>
運行結果：
修改div0讓其觸發BFC，還原高度，代碼以下：
#div0 {
border: 2px solid lightsalmon;
padding: 20px;
width: 400px;
overflow: hidden; /*讓div0觸發BFC*/
}
運行結果：
c）、外邊距將再也不與上下文以外的元素摺疊
示例代碼：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>BFC與IFC</title> <style type="text/css"> #div1 { width: 200px; height: 200px; background: lightgreen; margin-bottom: 100px; } #div2 { width: 200px; height: 200px; background: lightblue; margin-top: 100px; } </style> </head> <body> <h2>BFC與IFC</h2> <div id="div1">div1 </div> <div id="div2">div2 </div> </body> </html>
若是此時將腳本的div1與div2同時變成BFC環境，修改的css以下：
#div1 {
width: 200px;
height: 200px;
background: lightgreen;
margin-bottom: 100px;
overflow: hidden;
}
#div2 {
width: 200px;
height: 200px;
background: lightblue;
margin-top: 100px;
overflow: hidden;
}
執行時會發現效果仍是同樣，此時的div1與div2都是BFC上下文，可是要求的是：外邊距將再也不與上下文以外的元素摺疊，按照要求，咱們應該將div1與div2放在不一樣的上下文中，修改後的腳本以下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>BFC與IFC</title>
<style type="text/css">
#div1 {
width: 200px;
height: 200px;
background: lightgreen;
margin-bottom: 100px;
}
#div2 {
width: 200px;
height: 200px;
background: lightblue;
margin-top: 100px;
}
#div2-outer
{
overflow: hidden;
}
</style>
</head>
<body>
<h2>BFC與IFC</h2>
<div id="div1">div1
</div>
<div id="div2-outer">
<div id="div2">div2
</div>
</div>
</body>
</html>
運行結果以下：
d)、元素會一個接一個地被垂直放置，它們的起點是一個包含塊的頂部（文字不會環繞佈局）
示例代碼：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>BFC</title> <style> .div1 { border: 3px solid blue; width: 300px; } .cls1 { width: 100px; height: 100px; background: lightblue; margin: 5px; float:left; } </style> </head> <body> <div class="div1"> <div id="div11" class="cls1">div11</div> <p> 扁粉菜（BFC）是安陽名吃，製做原料和工藝都很簡單。扁粉菜是大鍋菜，以扁粉條爲主原料；熬一大鍋的高湯，將扁粉條下鍋煮熟，再燴入豆腐片，豬血片和青菜。盛上一碗加點辣椒，配上熱乎乎的油餅，吃上一口，怎一個「爽」字了得！扁粉菜最有養分的算是高湯和豬血片了，並且能夠續湯，雖然它是粗食，可是便宜，實惠，養分，因此你們都愛吃 </p> </div> </body> </html>
沒有BFC時的運行結果：
從運行結果能夠看出div與p仍是重疊了，只是文字被擠出，和前面提到的重疊是同一個意思，將p元素觸發BFC後的效果以下圖所示：
p{
overflow: hidden;
}
運行結果：
1.四、IE與Layout
Layout是 IE 瀏覽器渲染引擎的一個組成部分。在 IE 瀏覽器中，一個元素要麼本身對自身的內容進行組織和計算大小， 要麼依賴於包含塊來計算尺寸和組織內容，hasLayout 與 BFC 有不少類似之處。在IE中，元素使用「佈局」概念來控制尺寸和定位，分爲擁有佈局和沒有佈局兩種狀況，擁有佈局的元素由它控制自己及其子元素的尺寸和定位，而沒有佈局的元素則經過父元素（最近的擁有佈局的祖先元素）來控制尺寸和定位，而一個元素是否擁有佈局則由 hasLayout 屬性告知瀏覽器，它是個布爾型變量，true 表明元素擁有佈局，false 表明元素沒有佈局。簡而言之，hasLayout 只是一個 IE 下專有的屬性，hasLayout 爲 true 的元素瀏覽器會賦予它一系列的效果。
特別注意的是，hasLayout 在 IE 8 及以後的 IE 版本中已經被拋棄，因此在實際開發中只需針對 IE 8 如下的瀏覽器爲某些元素觸發 hasLayout。
出發IE下的haslayout方法：
display: inline-block
height: (除 auto 外任何值)
width: (除 auto 外任何值)
float: (left 或 right)
position: absolute
writing-mode: tb-rl
zoom: (除 normal 外任意值)
min-height: (任意值)
min-width: (任意值)
max-height: (除 none 外任意值)
max-width: (除 none 外任意值)
overflow: (除 visible 外任意值，僅用於塊級元素)
overflow-x: (除 visible 外任意值，僅用於塊級元素)
overflow-y: (除 visible 外任意值，僅用於塊級元素)
position: fixed
綜合前面的內容清除浮動的寫法以下：
.floatfix{
*zoom:1; /*在舊版本的IE瀏覽器縮放大小，觸發haslayout*/
}
.floatfix:after{
content:"";
display:table;
clear:both;
}
除了BFC還有IFC,GFC,FFC,是不一樣格式化上下文（Formatting Context）的簡稱，GFC是網格格式化上下文（Grid Formatting Context），FFC是彈性盒格式化上下文（Flex Formatting Context），FKC是開封菜的意思:）。
2、定位
使用css佈局position很是重要，他的語法以下：
position：static | relative | absolute | fixed | center | page | sticky
默認值：static，center、page、sticky是CSS3中新增長的值。
2.一、static
能夠認爲靜態的，默認元素都是靜態的定位，對象遵循常規流。此時4個定位偏移屬性不會被應用，也就是使用left，right，bottom，top將不會生效。
示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>定位</title> <style type="text/css"> #div1{ width: 200px; height: 200px; background: lightblue; left:100px; top:100px; } </style> </head> <body> <div id="div1"> </div> </body> </html>
運行結果：
定義偏移並未起做用。
2.二、relative
相對定位，對象遵循常規流，而且參照自身在常規流中的位置經過top，right，bottom，left這4個定位偏移屬性進行偏移時不會影響常規流中的任何元素。
示例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>相對定位</title>
<style type="text/css">
div {
width: 200px;
height: 200px;
background: lightblue;
margin: 10px;
}
#div1 {
position: relative; /*相對定位*/
left:30px; /*在本身原有位置上相對左邊偏移30像素*/
bottom: -30px;
background: lightgreen;
}
</style>
</head>
<body>
<div id="div1">div1
</div>
<div id="div2">div2
</div>
</body>
</html>
運行結果：
2.三、absolute
絕對定位，對象脫離常規流，此時偏移屬性參照的是離自身最近的定位祖先元素，若是沒有定位的祖先元素，則一直回溯到body元素。盒子的偏移位置不影響常規流中的任何元素，其margin不與其餘任何margin摺疊。
元素定位參考的是離自身最近的定位祖先元素，要知足兩個條件，第一個是本身的祖先元素，能夠是父元素也能夠是父元素的父元素，一直找，若是沒有則選擇body爲對照對象。第二個條件是要求祖先元素必須定位，通俗說就是position的屬性值爲非static都行。
示例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>絕對定位</title>
<style type="text/css">
div {
border: 2px solid darkturquoise;
padding: 10px;
}
#div1 {
width: 400px;
height: 400px;
}
#div2 {
width: 300px;
height: 300px;
}
#div3 {
width: 200px;
height: 200px;
position: absolute;
right: 5px;
top: 5px;
}
</style>
</head>
<body>
<div id="div1"> div1
<div id="div2"> div2
<div id="div3">div3
</div>
</div>
</div>
</body>
</html>
運行結果：
由於div3使用absolute絕對定位，它的參考對象是父元素div2,div1都不知足條件，由於二者都沒有進行定位，是默認的定位值static，根據約定最終找到body，因此會出如今頁面的右上角。此時若是想讓div3的參照對象爲div1，則能夠修改代碼爲：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>絕對定位</title>
<style type="text/css">
div {
border: 2px solid darkturquoise;
padding: 10px;
}
#div1 {
width: 400px;
height: 400px;
position: relative; /*相對定位*/
}
#div2 {
width: 300px;
height: 300px;
}
#div3 {
width: 200px;
height: 200px;
position: absolute;
right: 5px;
bottom: 5px;
}
</style>
</head>
<body>
<div id="div1"> div1
<div id="div2"> div2
<div id="div3">div3
</div>
</div>
</div>
</body>
</html>
運行結果：
2.四、fixed
固定定位，與absolute一致，但偏移定位是以窗口爲參考。當出現滾動條時，對象不會隨着滾動。
簡單的回頂端示例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>固定定位</title>
<style type="text/css">
body{
height: 3000px;
}
#top{
width: 50px;
height: 70px;
line-height: 70px;
text-align: center;
background: lightblue;
position: fixed;
right: 1px;
bottom: 30%;
}
</style>
</head>
<body>
<h2 id="title">固定定位</h2>
<div id="top"><a href="#title">回頂部</a></div>
</body>
</html>
運行結果：
練習：
center：
與absolute一致，但偏移定位是以定位祖先元素的中心點爲參考。盒子在其包含容器垂直水平居中。（CSS3）
page：
與absolute一致。元素在分頁媒體或者區域塊內，元素的包含塊始終是初始包含塊，不然取決於每一個absolute模式。（CSS3）
sticky：
對象在常態時遵循常規流。它就像是relative和fixed的合體，當在屏幕中時按常規流排版，當捲動到屏幕外時則表現如fixed。該屬性的表現是現實中你見到的吸附效果。（CSS3）
2.五、z-index屬性
語法：z-index: auto | <integer>
默認值：auto
適用於：定位元素。即定義了position爲非static的元素
取值：
auto： 元素在當前層疊上下文中的層疊級別是0。元素不會建立新的局部層疊上下文，除非它是根元素。
整數： 用整數值來定義堆疊級別。能夠爲負值。 說明：
檢索或設置對象的層疊順序。
z-index用於肯定元素在當前層疊上下文中的層疊級別，並肯定該元素是否建立新的局部層疊上下文。
當多個元素層疊在一塊兒時，數字大者將顯示在上面。
示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
div {
width: 200px;
height: 200px;
position: absolute;
}
#div1 {
background: lightsalmon;
}
#div2 {
background: lightgreen;
left: 33px;
top: 33px;
z-index: 1;
}
#div3{
background: lightblue;
left: 66px;
top: 66px;
}
</style>
</head>
<body>
<div id="div1">
div1
</div>
<div id="div2">
div2
</div>
<div id="div3">
div3
</div>
</body>
</html>
未指定z-index時默認運行效果：
指定div2的z-index值時的運行效果：
2.六、菜單
使用前面的內容實現了一個簡單的下拉菜單，效果以下：
菜單結構：
<ul class="menu"> <li> <a href="#">聯繫咱們</a> </li> <li> <a href="#">公司掠影</a> <ul> <li><a href="#">版權聲明</a></li> <li><a href="#">在線留言</a></li> <li><a href="#">技術支持</a></li> </ul> </li> <li> <a href="#">新聞中心</a> <ul> <li><a href="#">版權聲明</a></li> <li><a href="#">在線留言</a></li> <li><a href="#">技術支持</a></li> </ul> </li> <li> <a href="#">版權聲明</a> </li> <li> <a href="#">在線留言</a> <ul> <li><a href="#">版權聲明</a></li> <li><a href="#">在線留言</a></li> <li><a href="#">技術支持</a></li> </ul> </li> <li> <a href="#">技術支持</a> </li> </ul>
示例代碼：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> * /*重置瀏覽器默認樣式*/ { margin: 0; padding: 0; list-style: none; } .menu{ position: relative; } .menu li{ /*每項菜單的樣式*/ width: 100px; height: 36px; line-height: 36px; text-align: center; background: darkblue; } .menu li a{ text-decoration: none; color: white; } .menu > li /*讓子級li都浮動，橫排*/ { float: left; } .menu ul{ display: none; /*讓子菜單隱藏*/ position: absolute; } .menu li:hover ul{ /*當懸停在li上時選擇子級的ul顯示*/ display: block; } .menu ul li{ filter: Alpha(opacity=60); /* IE 濾鏡 */ opacity:0.6; } </style> </head> <body> <ul class="menu"> <li> <a href="#">聯繫咱們</a> </li> <li> <a href="#">公司掠影</a> <ul> <li><a href="#">版權聲明</a></li> <li><a href="#">在線留言</a></li> <li><a href="#">技術支持</a></li> </ul> </li> <li> <a href="#">新聞中心</a> <ul> <li><a href="#">版權聲明</a></li> <li><a href="#">在線留言</a></li> <li><a href="#">技術支持</a></li> </ul> </li> <li> <a href="#">版權聲明</a> </li> <li> <a href="#">在線留言</a> <ul> <li><a href="#">版權聲明</a></li> <li><a href="#">在線留言</a></li> <li><a href="#">技術支持</a></li> </ul> </li> <li> <a href="#">技術支持</a> </li> <li> <a href="#">在線留言</a> <ul> <li><a href="#">版權聲明</a></li> <li><a href="#">在線留言</a></li> <li><a href="#">技術支持</a></li> </ul> </li> <li> <a href="#">技術支持</a> </li> </ul> <img src="img/banner (12).jpg"/> <ul class="menu"> <li> <a href="#">聯繫咱們</a> </li> <li> <a href="#">公司掠影</a> <ul> <li><a href="#">版權聲明</a></li> <li><a href="#">在線留言</a></li> <li><a href="#">技術支持</a></li> </ul> </li> <li> <a href="#">新聞中心</a> <ul> <li><a href="#">版權聲明</a></li> <li><a href="#">在線留言</a></li> <li><a href="#">技術支持</a></li> </ul> </li> <li> <a href="#">版權聲明</a> </li> <li> <a href="#">在線留言</a> <ul> <li><a href="#">版權聲明</a></li> <li><a href="#">在線留言</a></li> <li><a href="#">技術支持</a></li> </ul> </li> <li> <a href="#">技術支持</a> </li> <li> <a href="#">在線留言</a> <ul> <li><a href="#">版權聲明</a></li> <li><a href="#">在線留言</a></li> <li><a href="#">技術支持</a></li> </ul> </li> <li> <a href="#">技術支持</a> </li> </ul> <img src="img/banner (12).jpg"/> </body> </html>
運行結果：
2.七、:target僞類
語法：
E:target { css }
說明：
匹配相關URL指向的E元素。
解釋：URL後面跟錨點#，指向文檔內某個具體的元素。這個被連接的元素就是目標元素(target element)，:target選擇器用於選取當前活動的目標元素。只有支持CSS3的瀏覽器可用。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .content { height: 50px; font-size: 20px; color: royalblue; border: 2px solid darkblue; } div :target { background: lightgreen; } </style> </head> <body> <div id="div1"> <a href="#p1">第一段</a> <a href="#p2">第二段</a> <a href="#p3">第三段</a> </div> <div id="div2"> <div id="p1" class="content">第一段內容</div> <div id="p2" class="content">第二段內容</div> <div id="p3" class="content">第三段內容</div> </div> </body> </html>
運行結果：
通俗說就是url中的#選中的id元素將被css選擇。在完成沒有js的菜單，選項卡時若是不考慮ie8則可使用這種新的辦法。
3、浮動
浮動在CSS佈局中飽受詬病，由於控制起來比較麻煩，但若是掌握了他的特性使用起來仍是不難的，在CSS中使用float指定浮動屬性值，該屬性的值指出了對象是否及如何浮動，浮動的框能夠向左或向右移動，直到它的外邊緣碰到包含框或另外一個浮動框的邊框爲止。因爲浮動框不在文檔的標準流中，因此文檔的標準流中的塊框表現得就像浮動框不存在同樣。float的基本語法以下：
float：none | left | right
3.一、float取值
none： 設置對象不浮動，默認值
left： 設置對象浮在左邊
right： 設置對象浮在右邊
3.二、float的特性
a)、浮動元素會從標準流中脫離
b)、浮動元素會觸發BFC（塊級元素格式化）、不影響外邊距摺疊
c)、 float元素會變成塊標籤
若是float不是none，當display:inline-table時，display的計算值爲table；當display:inline | inline-block | run-in | table-* 系時，display的計算值爲block，其它狀況爲指定值。
示例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>float</title>
<style type="text/css">
#span1{
width: 100px;
height: 100px;
background: lightgreen;
float: right;
}
</style>
</head>
<body>
<span id="span1">span1</span>
</body>
</html>
不設置float時的效果：
設置向右float時的效果：
span是一個行內標籤，默認設置高寬無效，但浮動後自動變成了塊標籤。
d)、float在絕對定位和display爲none時不生效
當display爲node時元素會隱藏，因此float意義不大；當position爲absolute絕對定位時元素也將從標準流中脫離，元素使用偏移量移動，float特性無效。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>float</title>
<style type="text/css">
#div1{
width: 100px;
height: 100px;
background: lightgreen;
float: right;
position: absolute;
bottom: 5px;
left: 5px;
}
</style>
</head>
<body>
<div id="div1">span1</div>
</body>
</html>
e)、浮動元素間會堆疊
浮動的框能夠向左或向右移動，直到它的外邊緣碰到包含框或另外一個浮動框的邊框爲止，浮動元素間的堆疊示例：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>float</title> <style type="text/css"> div{ width: 100px; height: 100px; background: lightgreen; float: left; margin: 5px; } </style> </head> <body> <div id="div1">div1 </div> <div id="div2">div2 </div> <div id="div3">div3 </div> </body> </html>
運行結果：
f)、浮動元素不能溢出包含塊
浮動元素在包含塊內，當包含塊的寬度不足以容下浮動的子元素時，將自動折行；垂直方向當包含塊認爲浮動的子元素沒有高度時，子元素會溢出，BFC能解決該問題。水平方向不會溢出，垂直方向有可能會溢出。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>float</title> <style type="text/css"> .cls1 { width: 100px; height: 100px; background: lightgreen; float: left; margin: 5px; } #div0{ width: 300px; padding: 5px; background: lightblue; } </style> </head> <body> <div id="div0"> <div id="div1" class="cls1">div1 </div> <div id="div2" class="cls1">div2 </div> <div id="div3" class="cls1">div3 </div> </div> </body> </html>
觸發BFC時：
g)、相鄰的浮動元素，left屬性最前面的元素，排在最左邊
從e就能夠看出效果，這裏不舉例。
h)、相鄰的浮動元素，right屬性最前面的元素，排在最右邊
排列在最左邊的向右浮動時出如今最右邊，示例以下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>float</title>
<style type="text/css">
div{
width: 100px;
height: 100px;
background: lightgreen;
float: right;
margin: 5px;
}
</style>
</head>
<body>
<div id="div1">div1左
</div>
<div id="div2">div2中
</div>
<div id="div3">div3右
</div>
</body>
</html>
運行效果：
i)、包含塊不會計算浮動元素的高寬
示例代碼：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>float</title> <style type="text/css"> .cls1 { width: 100px; height: 100px; background: lightgreen; float: left; margin: 5px; } #div0{ width: 330px; padding: 5px; border: 5px solid lightblue; } </style> </head> <body> <div id="div0"> <div id="div1" class="cls1">div1 </div> <div id="div2" class="cls1">div2 </div> <div id="div3" class="cls1">div3 </div> </div> </body> </html>
運行結果：
j)、浮動元素與非浮動元素會重疊，擠出塊中的內容
示例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>float</title>
<style type="text/css">
#div1 {
width: 100px;
height: 100px;
background: lightblue;
float: left;
}
#div2 {
width: 200px;
height: 200px;
background: lightgreen;
}
</style>
</head>
<body>
<div id="div1">div1
</div>
<div id="div2">div2
</div>
</body>
</html>
運行結果：
當div1從float時從標準流中脫離開了，div2在標準流中，能夠形象的認爲在div2這個隊列前沒有元素了因此div2要向前靠，脫離標準流的元素的z方向排列時比標準流中的元素排列要靠前一些，但div2的內容被div1佔用的空間擠出。
3.三、清除浮動
該屬性的值指出了不容許有浮動對象的邊。
clear：none | left | right | both
適用於：塊級元素
取值：
none： 容許兩邊均可以有浮動對象
both： 不容許有浮動對象
left： 不容許左邊有浮動對象
right： 不容許右邊有浮動對象
3.3.一、清除外部浮動
須要注意的是clear是用於控制元素自己的，不能影響別的元素，示例以下：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>清除浮動</title> <style type="text/css"> #div1 { width: 100px; height: 100px; background: lightblue; float: left; clear: both; /*div2的右邊與左邊都不能出現浮動元素*/ } #div2 { width: 200px; height: 200px; background: lightgreen; float: left; } </style> </head> <body> <div id="div1">div1</div> <div id="div2">div2</div> </body> </html>
運行結果：
示例中div1的清除浮動並無效果，由於他沒有辦法影響div2，若是設置div2清除浮動，則元素自己會向下一行，示例代碼以下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>清除浮動</title>
<style type="text/css">
#div1 {
width: 100px;
height: 100px;
background: lightblue;
float: left;
}
#div2 {
width: 200px;
height: 200px;
background: lightgreen;
float: left;
clear: both; /*div2的右邊與左邊都不能出現浮動元素*/
}
</style>
</head>
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
</body>
</html>
運行結果以下：
若是div2後面還有一個div3也將會出現前面同樣的狀況：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>清除浮動</title> <style type="text/css"> #div1 { width: 100px; height: 100px; background: lightblue; float: left; } #div2 { width: 200px; height: 200px; background: lightgreen; float: left; clear: both; /*div2的右邊與左邊都不能出現浮動元素*/ } #div3 { width: 100px; height: 100px; background: lightcoral; float: left; } </style> </head> <body> <div id="div1">div1</div> <div id="div2">div2</div> <div id="div3">div3</div> </body> </html>
練習：
3.3.二、清除內部浮動
當一個包含塊內部有浮動元素時，外部塊不會計算浮動塊的高度與寬度，爲了讓內部的浮動元素撐開包含塊，須要還原高度，暫且稱爲清除內部浮動。
方法1：BFC
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>float</title> <style type="text/css"> .cls1 { width: 100px; height: 100px; background: lightgreen; float: left; margin: 5px; } #div0{ width: 330px; padding: 5px; border: 5px solid lightblue; overflow: hidden; /*div0被觸發BFC*/ } </style> </head> <body> <div id="div0"> <div id="div1" class="cls1">div1 </div> <div id="div2" class="cls1">div2 </div> <div id="div3" class="cls1">div3 </div> </div> </body> </html>
方法2：增長一個空的div，清除浮動
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>float</title> <style type="text/css"> .cls1 { width: 100px; height: 100px; background: lightgreen; float: left; margin: 5px; } #div0{ width: 330px; padding: 5px; border: 5px solid lightblue; } .clear{ clear: both; } </style> </head> <body> <div id="div0"> <div id="div1" class="cls1">div1 </div> <div id="div2" class="cls1">div2 </div> <div id="div3" class="cls1">div3 </div> <div class="clear"></div> </div> </body> </html>
運行結果同方法1，要解釋該方法的原理能夠參考上文中的第j點。
較爲通用且兼容的清除浮動寫法：
.clearfix {
*zoom: 1;/*在舊版本的IE瀏覽器縮放大小，觸發haslayout（相似BFC）*/
}
.clearfix:after { /*僞元素，在應用該元素後添加一個僞元素*/
content: ""; /*內容爲空*/
display: table; /*BFC，清除內部浮動*/
clear: both; /*清除外部浮動*/
}
4、多種居中辦法
4.一、塊標籤自身水平居中
當一個有寬度的塊標籤設置margin:0 auto時將實現自身的水平居中，示例腳本以下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>float</title>
<style type="text/css">
#container {
margin: 0 auto;
width: 90%;
background: lightblue;
height: 200px;
}
</style>
</head>
<body>
<div id="container">
</div>
</body>
</html>
運行結果：
4.二、塊標籤內對齊
text-align：start | end | left | right | center | justify | match-parent | justify-all
默認值：start
適用於：塊標籤
left： 內容左對齊。
center： 內容居中對齊。
right： 內容右對齊。
justify： 內容兩端對齊，但對於強制打斷的行（被打斷的這一行）及最後一行（包括僅有一行文本的狀況，由於它既是第一行也是最後一行）不作處理。（CSS3）
start： 內容對齊開始邊界。（CSS3）
end： 內容對齊結束邊界。（CSS3）
match-parent： 這個值和 inherit 表現一致，只是該值繼承的 start 或 end 關鍵字是針對父母的 <' direction '> 值並計算的，計算值能夠是 left 和 right 。（CSS3）
justify-all： 效果等同於 justify，但還會讓最後一行也兩端對齊。（CSS3）
示例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>float</title>
<style type="text/css">
#container {
margin: 0 auto;
width: 90%;
background: lightblue;
height: 200px;
text-align: center;
}
#div1{
width: 100px;
height: 100px;
background: lightgreen;
}
</style>
</head>
<body>
<div id="container">
<div id="div1">div1</div>
Hello Center
</div>
</body>
</html>
運行結果：
這種對齊方式只針對塊標籤內的行內標籤（inline box）與行內塊標籤（inline block）有將，對塊標籤是無效的由於塊標籤默認老是佔整行。若是將示例中div1的顯示方式修改成行內塊標籤(display: inline-block;)，則效果以下所示：
在佈局中常常會須要垂直居中，但沒有像水平居中那麼容易，這裏總結出5種辦法：
4.三、垂直居中方法一
當一個設置了定位的元素全部的偏移爲0且margin爲auto時將水平，垂直都居中，且父元素自身的高度可動態變化。
示例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>居中</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
#div0 {
width: 80%;
height: 90%;
border: 3px solid lightblue;
margin: 0 auto;
position: relative;
}
#div1 {
width: 200px;
height: 150px;
background: lightgreen;
position: absolute;
/*居中開始*/
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
/*居中結束*/
}
</style>
</head>
<body>
<div id="div0">
<div id="div1">
</div>
</div>
</body>
</html>
運行結果：
我的認爲box偏移上下左右都爲0，這時候它就不知所措了，只好待在中間。
4.四、垂直居中方法二
若是是單行文本，行高如塊的高度同樣時將居中，只一行，行高和元素同樣高，居中。
line-height: 600px;
height: 600px;
只能夠是文字等一些行內標籤，圖片不行，示例代碼以下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>居中</title>
<style type="text/css">
#div0 {
background: lightblue;
height: 80px;
/*line-height:40px;*/
font:20px/80px "microsoft yahei";
}
</style>
</head>
<body>
<div id="div0">
若是是單行文本，行高如塊的高度同樣時將居中，只一行，行高和元素同樣高，居中
</div>
</body>
</html>
運行結果：
4.五、垂直居中方法三
讓元素相對父元素定位，偏移左50%，上50%，把自身向左移半個寬度，向上移半個高度，同時完成了水平與垂直方向的居中
示例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>居中</title>
<style type="text/css">
#div0 {
width: 80%;
height: 500px;
background: lightblue;
position: relative;
margin: 0 auto;
}
#div1{
width: 200px;
height: 150px;
background: lightcoral;
position: absolute;
left: 50%;
top:50%;
margin-top: -75px;
margin-left: -100px;
}
</style>
</head>
<body>
<div id="div0">
<div id="div1">
</div>
</div>
</body>
</html>
運行效果：
4.六、垂直居中方法四
在CSS有一個屬性應該欺騙過不少開發者，一直認爲使用了他就能夠垂直居中了，但不行，這個屬性就是：
語法：vertical-align：baseline | sub | super | top | text-top | middle | bottom | text-bottom | <percentage> | <length>
默認值：baseline
做用：設置或檢索內聯元素在行框內的垂直對其方式
適用於：內聯級與 table-cell 元素
baseline： 把當前盒的基線與父級盒的基線對齊。若是該盒沒有基線，就將底部外邊距的邊界和父級的基線對齊
sub： 把當前盒的基線下降到合適的位置做爲父級盒的下標（該值不影響該元素文本的字體大小）
super： 把當前盒的基線提高到合適的位置做爲父級盒的上標（該值不影響該元素文本的字體大小）
text-top： 把當前盒的top和父級的內容區的top對齊
text-bottom： 把當前盒的bottom和父級的內容區的bottom對齊
middle： 把當前盒的垂直中心和父級盒的基線加上父級的半x-height對齊
top： 把當前盒的top與行盒的top對齊
bottom： 把當前盒的bottom與行盒的bottom對齊
<percentage>： 把當前盒提高（正值）或者下降（負值）這個距離，百分比相對line-height計算。當值爲0%時等同於baseline。
<length>： 把當前盒提高（正值）或者下降（負值）這個距離。當值爲0時等同於baseline。（CSS2） 說明：
設置或檢索內聯元素在行框內的垂直對其方式。
對應的腳本特性爲verticalAlign。
不能實現對齊的主要緣由是：vertical-align這個屬性的特色，它是相對兄弟級行高（line-height）來定位
示例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>居中</title>
<style type="text/css">
#div0 {
width: 80%;
height: 500px;
background: lightblue;
position: relative;
margin: 0 auto;
text-align: center;
}
#img1{
vertical-align: middle;
}
#span1{
line-height: 500px;
}
</style>
</head>
<body>
<div id="div0">
<img src="img/cp.png" id="img1"/><span id="span1"></span>
</div>
</body>
</html>
運行效果：
其實此處只設置父元素的行高與高度同樣時也能達到上面的效果，示例代碼以下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>居中</title>
<style type="text/css">
#div0 {
width: 80%;
height: 500px;
background: lightblue;
position: relative;
margin: 0 auto;
text-align: center;
line-height: 500px;
}
#img1 {
vertical-align: middle;
}
</style>
</head>
<body>
<div id="div0">
<img src="img/cp.png" id="img1" />
</div>
</body>
</html>
在IE8與Google瀏覽器中運行效果：
4.七、垂直居中方法五
4.7.一、使用div構造一個表格
示例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.divTable {
display: table;
width:50%;
}
.divTr {
display: table-row;
}
.divTd {
display: table-cell;
}
div{
border:1px solid blue;
}
</style>
</head>
<body>
<div class="divTable">
<div class="divTr">
<div class="divTd">td11</div>
<div class="divTd">td12</div>
</div>
<div class="divTr">
<div class="divTd">td21</div>
<div class="divTd">td22</div>
</div>
</div>
</body>
</html>
運行結果：
4.7.二、使用表格特性居中
示例代碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>居中</title>
<style type="text/css">
body,
html {
margin: 0;
padding: 0;
height: 100%;
}
#div0 {
width: 80%;
height: 50%;
background: lightblue;
margin: 0 auto;
display: table; /*相似讓div1爲一個table*/
}
#div1{
display: table-cell; /*相似table中的td*/
vertical-align: middle; /*垂直居中*/
text-align: center; /*水平居中*/
}
</style>
</head>
<body>
<div id="div0">
<div id="div1">
<img src="img/cp.png" id="img1" height="200" />
</div>
</div>
</body>
</html>
運行結果：
4.八、垂直居中方法六
在某些時候須要將小圖片與文字對象，可使用對齊的屬性absmiddle（絕對居中），示例以下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1{
border: 2px solid lightblue;
}
</style>
</head>
<body>
<div class="div1">
<img src="img/018080.png" align="absmiddle"/>電視機
</div>
</body>
</html>
運行結果：
在IE8與chrome瀏覽器下的效果同樣。
4.九、垂直居中方法七
方法與4.5很是相似，可是4.5要求知道居中元素自身的高度與寬度，這樣會有必定的侷限，CSS3中可使用transform移動元素自身的寬度與高度，示例代碼以下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>居中</title>
<style type="text/css">
body,
html {
margin: 0;
padding: 0;
height: 100%;
}
#div0 {
width: 80%;
height: 70%;
background: lightblue;
margin: 0 auto;
position: relative;
}
#img1 {
position: absolute;
top: 50%;
left: 50%;
transform:translate(-50%,-50%);
}
</style>
</head>
<body>
<div id="div0">
<img src="img/cp.png" id="img1"/>
</div>
</body>
</html>
運行結果：
transform用於設置或檢索對象的轉換，參數translate()指定對象的2D translation（2D平移）。第一個參數對應X軸，第二個參數對應Y軸。若是第二個參數未提供，則默認值爲0
- 1. CSS3與頁面佈局學習總結（三）——BFC、定位、浮動、7種垂直居中方法
- 2. CSS3與頁面佈局學習筆記（三）——BFC、定位、浮動、7種垂直居中方法
- 3. 水平居中、垂直居中、水平垂直居中、浮動居中、絕對定位居中.......幫你搞定
- 4. 浮層水平垂直居中方法
- 5. CSS佈局總結——盒模型，position定位，尺寸，水平居中垂直居中，浮動float，BFC
- 6. css保持浮層水平垂直居中的四種方法
- 7. CSS垂直居中的8種方法
- 8. div 垂直居中的六種方法
- 9. CSS 垂直居中的七種方法
- 10. CSS垂直居中的6種方法
- 更多相關文章...
- • ionic 浮動框 - ionic 教程
- • PHP imagecharup - 垂直地畫一個字符 - PHP參考手冊
- • SpringBoot中properties文件不能自動提示解決方法
- • 算法總結-滑動窗口
-
每一个你不满意的现在，都有一个你没有努力的曾经。