當前位置：首頁 > 前端技术 > CSS >内容正文

CSS

CSS3与页面布局学习笔记（三）——BFC、定位、浮动、7种垂直居中方法

發(fā)布時間：2023/12/2 CSS 50 豆豆

生活随笔收集整理的這篇文章主要介紹了 CSS3与页面布局学习笔记（三）——BFC、定位、浮动、7种垂直居中方法小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

一、BFC與IFC

1.1、BFC與IFC概要

BFC（Block Formatting Context）即“塊級格式化上下文”， IFC（Inline Formatting Context）即行內(nèi)格式化上下文。常規(guī)流（也稱標準流、普通流）是一個文檔在被顯示時最常見的布局形態(tài)。一個框在常規(guī)流中必須屬于一個格式化上下文，你可以把BFC想象成一個大箱子，箱子外邊的元素將不與箱子內(nèi)的元素產(chǎn)生作用。

BFC是W3C CSS 2.1 規(guī)范中的一個概念，它決定了元素如何對其內(nèi)容進行定位，以及與其他元素的關(guān)系和相互作用。當涉及到可視化布局的時候，Block Formatting Context提供了一個環(huán)境，HTML元素在這個環(huán)境中按照一定規(guī)則進行布局。一個環(huán)境中的元素不會影響到其它環(huán)境中的布局。比如浮動元素會形成BFC，浮動元素內(nèi)部子元素的主要受該浮動元素影響，兩個浮動元素之間是互不影響的。也可以說BFC就是一個作用范圍。

在普通流中的 Box(框) 屬于一種 formatting context(格式化上下文) ，類型可以是 block ，或者是 inline ，但不能同時屬于這兩者。并且， Block boxes(塊框) 在 block formatting context(塊格式化上下文) 里格式化， Inline boxes(塊內(nèi)框) 則在 Inline Formatting Context(行內(nèi)格式化上下文) 里格式化。

1.2、如何產(chǎn)生BFC

當一個HTML元素滿足下面條件的任何一點，都可以產(chǎn)生Block Formatting Context：
a)、float的值不為none

b)、overflow的值不為visible

c)、display的值為table-cell, table-caption, inline-block中的任何一個

d)、position的值不為relative和static

CSS3觸發(fā)BFC方式則可以簡單描述為：在元素定位非static,relative的情況下觸發(fā)，float也是一種定位方式。

1.3、BFC的作用與特點

a)、不和浮動元素重疊，清除外部浮動，阻止浮動元素覆蓋

如果一個浮動元素后面跟著一個非浮動的元素，那么就會產(chǎn)生一個重疊的現(xiàn)象。常規(guī)流（也稱標準流、普通流）是一個文檔在被顯示時最常見的布局形態(tài)，當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> View Code

運行結(jié)果：

此時的div1因為float已經(jīng)產(chǎn)生了BFC，在div2中添加樣式overflow:hidden讓其產(chǎn)生BFC，代碼如下：

#div2{width: 300px;height: 300px;background: lightblue;overflow: hidden;}

運行結(jié)果：

b)、清除元素內(nèi)部浮動，計算浮動元素的高度

只要把父元素設(shè)為BFC就可以清理子元素的浮動了，最常見的用法就是在父元素上設(shè)置overflow: hidden樣式，對于IE6加上zoom:1就可以了(IE Haslayout)。

當一個元素的內(nèi)部元素浮動時不會計算其高度，示例如下：

<!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> View Code

運行結(jié)果：

修改div0讓其觸發(fā)BFC，還原高度，代碼如下：

#div0 {border: 2px solid lightsalmon;padding: 20px;width: 400px;overflow: hidden; /*讓div0觸發(fā)BFC*/}

運行結(jié)果：

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> View Code

如果此時將腳本的div1與div2同時變成BFC環(huán)境，修改的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;}

執(zhí)行時會發(fā)現(xiàn)效果還是一樣，此時的div1與div2都是BFC上下文，但是要求的是：外邊距將不再與上下文之外的元素折疊，按照要求，我們應(yīng)該將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>

運行結(jié)果如下：

?d)、元素會一個接一個地被垂直放置，它們的起點是一個包含塊的頂部（文字不會環(huán)繞布局）

示例代碼：

<!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）是安陽名吃，制作原料和工藝都很簡單。扁粉菜是大鍋菜，以扁粉條為主原料；熬一大鍋的高湯，將扁粉條下鍋煮熟，再燴入豆腐片，豬血片和青菜。盛上一碗加點辣椒，配上熱乎乎的油餅，吃上一口，怎一個“爽”字了得！扁粉菜最有營養(yǎng)的算是高湯和豬血片了，而且可以續(xù)湯，雖然它是粗食，但是便宜，實惠，營養(yǎng)，所以大家都愛吃</p></div></body> </html> View Code

沒有BFC時的運行結(jié)果：

從運行結(jié)果可以看出div與p還是重疊了，只是文字被擠出，和前面提到的重疊是同一個意思，將p元素觸發(fā)BFC后的效果如下圖所示：

p{overflow: hidden;}

運行結(jié)果：

1.4、IE與Layout

Layout是 IE 瀏覽器渲染引擎的一個組成部分。在 IE 瀏覽器中，一個元素要么自己對自身的內(nèi)容進行組織和計算大小，要么依賴于包含塊來計算尺寸和組織內(nèi)容，hasLayout 與 BFC 有很多相似之處。在IE中，元素使用“布局”概念來控制尺寸和定位，分為擁有布局和沒有布局兩種情況，擁有布局的元素由它控制本身及其子元素的尺寸和定位，而沒有布局的元素則通過父元素（最近的擁有布局的祖先元素）來控制尺寸和定位，而一個元素是否擁有布局則由 hasLayout 屬性告知瀏覽器，它是個布爾型變量，true 代表元素擁有布局，false 代表元素沒有布局。簡而言之，hasLayout 只是一個 IE 下專有的屬性，hasLayout 為 true 的元素瀏覽器會賦予它一系列的效果。
特別注意的是，hasLayout 在 IE 8 及之后的 IE 版本中已經(jīng)被拋棄，所以在實際開發(fā)中只需針對 IE 8 以下的瀏覽器為某些元素觸發(fā) hasLayout。

出發(fā)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

綜合前面的內(nèi)容清除浮動的寫法如下：

.floatfix{ *zoom:1; /*在舊版本的IE瀏覽器縮放大小，觸發(fā)haslayout*/ } .floatfix:after{ content:""; display:table; clear:both; }

除了BFC還有IFC,GFC,FFC,是不同格式化上下文（Formatting Context）的簡稱，GFC是網(wǎng)格格式化上下文（Grid Formatting Context），FFC是彈性盒格式化上下文（Flex Formatting Context），FKC是開封菜的意思:）。

二、定位

使用css布局position非常重要，他的語法如下：

2.1、static
可以認為靜態(tài)的，默認元素都是靜態(tài)的定位，對象遵循常規(guī)流。此時4個定位偏移屬性不會被應(yīng)用，也就是使用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> View Code

運行結(jié)果：

定義偏移并未起作用。

2.2、relative

相對定位，對象遵循常規(guī)流，并且參照自身在常規(guī)流中的位置通過top，right，bottom，left這4個定位偏移屬性進行偏移時不會影響常規(guī)流中的任何元素。

示例代碼：

<!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>

運行結(jié)果：

2.3、absolute

絕對定位，對象脫離常規(guī)流，此時偏移屬性參照的是離自身最近的定位祖先元素，如果沒有定位的祖先元素，則一直回溯到body元素。盒子的偏移位置不影響常規(guī)流中的任何元素，其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>

運行結(jié)果：

?因為div3使用absolute絕對定位，它的參考對象是父元素div2,div1都不滿足條件，因為兩者都沒有進行定位，是默認的定位值static，根據(jù)約定最終找到body，所以會出現(xiàn)在頁面的右上角。此時如果想讓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>

運行結(jié)果：

2.4、fixed

固定定位，與absolute一致，但偏移定位是以窗口為參考。當出現(xiàn)滾動條時，對象不會隨著滾動。

簡單的回頂端示例代碼：

<!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>

運行結(jié)果：

練習：

center：
與absolute一致，但偏移定位是以定位祖先元素的中心點為參考。盒子在其包含容器垂直水平居中。（CSS3）
page：
與absolute一致。元素在分頁媒體或者區(qū)域塊內(nèi)，元素的包含塊始終是初始包含塊，否則取決于每個absolute模式。（CSS3）
sticky：
對象在常態(tài)時遵循常規(guī)流。它就像是relative和fixed的合體，當在屏幕中時按常規(guī)流排版，當卷動到屏幕外時則表現(xiàn)如fixed。該屬性的表現(xiàn)是現(xiàn)實中你見到的吸附效果。（CSS3）

2.5、z-index屬性

語法：z-index: auto | <integer>
默認值：auto
適用于：定位元素。即定義了position為非static的元素
取值：
auto：元素在當前層疊上下文中的層疊級別是0。元素不會創(chuàng)建新的局部層疊上下文，除非它是根元素。
整數(shù)：用整數(shù)值來定義堆疊級別。可以為負值。說明：
檢索或設(shè)置對象的層疊順序。
z-index用于確定元素在當前層疊上下文中的層疊級別，并確定該元素是否創(chuàng)建新的局部層疊上下文。
當多個元素層疊在一起時，數(shù)字大者將顯示在上面。

?示例：

<!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.6、菜單

使用前面的內(nèi)容實現(xiàn)了一個簡單的下拉菜單，效果如下：

菜單結(jié)構(gòu)：

<ul class="menu"><li><a href="#">聯(lián)系我們</a></li><li><a href="#">公司掠影</a><ul><li><a href="#">版權(quán)聲明</a></li><li><a href="#">在線留言</a></li><li><a href="#">技術(shù)支持</a></li></ul></li><li><a href="#">新聞中心</a><ul><li><a href="#">版權(quán)聲明</a></li><li><a href="#">在線留言</a></li><li><a href="#">技術(shù)支持</a></li></ul></li><li><a href="#">版權(quán)聲明</a></li><li><a href="#">在線留言</a><ul><li><a href="#">版權(quán)聲明</a></li><li><a href="#">在線留言</a></li><li><a href="#">技術(shù)支持</a></li></ul></li><li><a href="#">技術(shù)支持</a></li></ul> View Code

示例代碼：

<!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="#">聯(lián)系我們</a></li><li><a href="#">公司掠影</a><ul><li><a href="#">版權(quán)聲明</a></li><li><a href="#">在線留言</a></li><li><a href="#">技術(shù)支持</a></li></ul></li><li><a href="#">新聞中心</a><ul><li><a href="#">版權(quán)聲明</a></li><li><a href="#">在線留言</a></li><li><a href="#">技術(shù)支持</a></li></ul></li><li><a href="#">版權(quán)聲明</a></li><li><a href="#">在線留言</a><ul><li><a href="#">版權(quán)聲明</a></li><li><a href="#">在線留言</a></li><li><a href="#">技術(shù)支持</a></li></ul></li><li><a href="#">技術(shù)支持</a></li><li><a href="#">在線留言</a><ul><li><a href="#">版權(quán)聲明</a></li><li><a href="#">在線留言</a></li><li><a href="#">技術(shù)支持</a></li></ul></li><li><a href="#">技術(shù)支持</a></li></ul><img src="img/banner (12).jpg"/><ul class="menu"><li><a href="#">聯(lián)系我們</a></li><li><a href="#">公司掠影</a><ul><li><a href="#">版權(quán)聲明</a></li><li><a href="#">在線留言</a></li><li><a href="#">技術(shù)支持</a></li></ul></li><li><a href="#">新聞中心</a><ul><li><a href="#">版權(quán)聲明</a></li><li><a href="#">在線留言</a></li><li><a href="#">技術(shù)支持</a></li></ul></li><li><a href="#">版權(quán)聲明</a></li><li><a href="#">在線留言</a><ul><li><a href="#">版權(quán)聲明</a></li><li><a href="#">在線留言</a></li><li><a href="#">技術(shù)支持</a></li></ul></li><li><a href="#">技術(shù)支持</a></li><li><a href="#">在線留言</a><ul><li><a href="#">版權(quán)聲明</a></li><li><a href="#">在線留言</a></li><li><a href="#">技術(shù)支持</a></li></ul></li><li><a href="#">技術(shù)支持</a></li></ul><img src="img/banner (12).jpg"/></body></html> View Code

運行結(jié)果：

2.7、:target偽類

語法：
E:target { css }
說明：
匹配相關(guān)URL指向的E元素。
解釋：URL后面跟錨點#，指向文檔內(nèi)某個具體的元素。這個被鏈接的元素就是目標元素(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">第一段內(nèi)容</div><div id="p2" class="content">第二段內(nèi)容</div><div id="p3" class="content">第三段內(nèi)容</div></div></body></html> View Code

運行結(jié)果：

通俗說就是url中的#選中的id元素將被css選擇。在完成沒有js的菜單，選項卡時如果不考慮ie8則可以使用這種新的辦法。

三、浮動

浮動在CSS布局中飽受詬病，因為控制起來比較麻煩，但如果掌握了他的特性使用起來還是不難的，在CSS中使用float指定浮動屬性值，該屬性的值指出了對象是否及如何浮動，浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。由于浮動框不在文檔的標準流中，所以文檔的標準流中的塊框表現(xiàn)得就像浮動框不存在一樣。float的基本語法如下：

float：none | left | right

3.1、float取值

none：設(shè)置對象不浮動，默認值

left：設(shè)置對象浮在左邊

right：設(shè)置對象浮在右邊

3.2、float的特性

a)、浮動元素會從標準流中脫離

b)、浮動元素會觸發(fā)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>

?不設(shè)置float時的效果：

設(shè)置向右float時的效果：

span是一個行內(nèi)標簽，默認設(shè)置高寬無效，但浮動后自動變成了塊標簽。

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> View Code

運行結(jié)果：

f)、浮動元素不能溢出包含塊

浮動元素在包含塊內(nèi)，當包含塊的寬度不足以容下浮動的子元素時，將自動折行；垂直方向當包含塊認為浮動的子元素沒有高度時，子元素會溢出，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> View Code

觸發(fā)BFC時：

g)、相鄰的浮動元素，left屬性最前面的元素，排在最左邊

從e就可以看出效果，這里不舉例。

h)、相鄰的浮動元素，right屬性最前面的元素，排在最右邊

排列在最左邊的向右浮動時出現(xiàn)在最右邊，示例如下：

<!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> View Code

運行結(jié)果：

j)、浮動元素與非浮動元素會重疊，擠出塊中的內(nèi)容

示例代碼：

<!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>

運行結(jié)果：

當div1從float時從標準流中脫離開了，div2在標準流中，可以形象的認為在div2這個隊列前沒有元素了所以div2要向前靠，脫離標準流的元素的z方向排列時比標準流中的元素排列要靠前一些，但div2的內(nèi)容被div1占用的空間擠出。

3.3、清除浮動

該屬性的值指出了不允許有浮動對象的邊。
clear：none | left | right | both
適用于：塊級元素
取值：
none：允許兩邊都可以有浮動對象
both：不允許有浮動對象
left：不允許左邊有浮動對象
right：不允許右邊有浮動對象

3.3.1、清除外部浮動

需要注意的是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的右邊與左邊都不能出現(xiàn)浮動元素*/}#div2 {width: 200px;height: 200px;background: lightgreen;float: left;}</style></head><body><div id="div1">div1</div><div id="div2">div2</div></body></html> View Code

運行結(jié)果：

示例中div1的清除浮動并沒有效果，因為他沒有辦法影響div2，如果設(shè)置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的右邊與左邊都不能出現(xiàn)浮動元素*/}</style></head><body><div id="div1">div1</div><div id="div2">div2</div></body></html>

?運行結(jié)果如下：

如果div2后面還有一個div3也將會出現(xiàn)前面一樣的情況：

<!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的右邊與左邊都不能出現(xiàn)浮動元素*/}#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> View Code

?練習：

3.3.2、清除內(nèi)部浮動

當一個包含塊內(nèi)部有浮動元素時，外部塊不會計算浮動塊的高度與寬度，為了讓內(nèi)部的浮動元素撐開包含塊，需要還原高度，暫且稱為清除內(nèi)部浮動。

方法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被觸發(fā)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> View Code

方法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> View Code

運行結(jié)果同方法1，要解釋該方法的原理可以參考上文中的第j點。

較為通用且兼容的清除浮動寫法：

.clearfix {*zoom: 1;/*在舊版本的IE瀏覽器縮放大小，觸發(fā)haslayout（類似BFC）*/}.clearfix:after { /*偽元素，在應(yīng)用該元素后添加一個偽元素*/content: ""; /*內(nèi)容為空*/display: table; /*BFC，清除內(nèi)部浮動*/clear: both; /*清除外部浮動*/}

四、多種居中辦法

4.1、塊標簽自身水平居中

當一個有寬度的塊標簽設(shè)置margin:0 auto時將實現(xiàn)自身的水平居中，示例腳本如下：

?運行結(jié)果：

4.2、塊標簽內(nèi)對齊

text-align：start | end | left | right | center | justify | match-parent | justify-all
默認值：start
適用于：塊標簽
left：內(nèi)容左對齊。
center：內(nèi)容居中對齊。
right：內(nèi)容右對齊。
justify：內(nèi)容兩端對齊，但對于強制打斷的行（被打斷的這一行）及最后一行（包括僅有一行文本的情況，因為它既是第一行也是最后一行）不做處理。（CSS3）
start：內(nèi)容對齊開始邊界。（CSS3）
end：內(nèi)容對齊結(jié)束邊界。（CSS3）
match-parent：這個值和 inherit 表現(xiàn)一致，只是該值繼承的 start 或 end 關(guān)鍵字是針對父母的 <' 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>?

運行結(jié)果：

這種對齊方式只針對塊標簽內(nèi)的行內(nèi)標簽（inline box）與行內(nèi)塊標簽（inline block）有將，對塊標簽是無效的因為塊標簽?zāi)J總是占整行。如果將示例中div1的顯示方式修改為行內(nèi)塊標簽(display: inline-block;)，則效果如下所示：

在布局中經(jīng)常會需要垂直居中，但沒有像水平居中那么容易，這里總結(jié)出5種辦法：

4.3、垂直居中方法一

當一個設(shè)置了定位的元素所有的偏移為0且margin為auto時將水平，垂直都居中，且父元素自身的高度可動態(tài)變化。

示例代碼：

<!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;/*居中結(jié)束*/}</style></head><body><div id="div0"><div id="div1"></div></div></body></html>

運行結(jié)果：

個人認為box偏移上下左右都為0，這時候它就不知所措了，只好待在中間。

4.4、垂直居中方法二

如果是單行文本，行高如塊的高度一樣時將居中，只一行，行高和元素一樣高，居中。

line-height: 600px;
height: 600px;

只可以是文字等一些行內(nèi)標簽，圖片不行，示例代碼如下：

<!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>

運行結(jié)果：

4.5、垂直居中方法三

讓元素相對父元素定位，偏移左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.6、垂直居中方法四

在CSS有一個屬性應(yīng)該欺騙過很多開發(fā)者，一直認為使用了他就可以垂直居中了，但不行，這個屬性就是：

默認值：baseline

作用：設(shè)置或檢索內(nèi)聯(lián)元素在行框內(nèi)的垂直對其方式
適用于：內(nèi)聯(lián)級與 table-cell 元素
baseline：把當前盒的基線與父級盒的基線對齊。如果該盒沒有基線，就將底部外邊距的邊界和父級的基線對齊
sub：把當前盒的基線降低到合適的位置作為父級盒的下標（該值不影響該元素文本的字體大小）
super：把當前盒的基線提升到合適的位置作為父級盒的上標（該值不影響該元素文本的字體大小）
text-top：把當前盒的top和父級的內(nèi)容區(qū)的top對齊
text-bottom：把當前盒的bottom和父級的內(nèi)容區(qū)的bottom對齊
middle：把當前盒的垂直中心和父級盒的基線加上父級的半x-height對齊
top：把當前盒的top與行盒的top對齊
bottom：把當前盒的bottom與行盒的bottom對齊
<percentage>：把當前盒提升（正值）或者降低（負值）這個距離，百分比相對line-height計算。當值為0%時等同于baseline。
<length>：把當前盒提升（正值）或者降低（負值）這個距離。當值為0時等同于baseline。（CSS2）說明：
設(shè)置或檢索內(nèi)聯(lián)元素在行框內(nèi)的垂直對其方式。
對應(yīng)的腳本特性為verticalAlign。

不能實現(xiàn)對齊的主要原因是：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>

運行效果：

其實此處只設(shè)置父元素的行高與高度一樣時也能達到上面的效果，示例代碼如下：

<!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.7、垂直居中方法五

4.7.1、使用div構(gòu)造一個表格

示例代碼：

<!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>

運行結(jié)果：

4.7.2、使用表格特性居中

示例代碼：

<!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>

運行結(jié)果：

4.8、垂直居中方法六

在某些時候需要將小圖片與文字對象，可以使用對齊的屬性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>

運行結(jié)果：

在IE8與chrome瀏覽器下的效果一樣。

4.9、垂直居中方法七

方法與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>

運行結(jié)果：

transform用于設(shè)置或檢索對象的轉(zhuǎn)換，參數(shù)translate()指定對象的2D translation（2D平移）。第一個參數(shù)對應(yīng)X軸，第二個參數(shù)對應(yīng)Y軸。如果第二個參數(shù)未提供，則默認值為0

五、示例下載

github:https://github.com/zhangguo5/CSS3_3

參照：http://www.cnblogs.com/best

總結(jié)

以上是生活随笔為你收集整理的CSS3与页面布局学习笔记（三）——BFC、定位、浮动、7种垂直居中方法的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇： display转块状化
下一篇： CSS3与页面布局学习笔记（二）——盒子