CSS float相關介紹
一、float介紹
float元素也稱為浮動元素,設定了float屬性的元素會根據屬性值向左或向右浮動。浮動元素會從普通文件流中脫離,但浮動元素影響的不僅是自己,它會影響周圍的元素對齊進行環繞。簡單來說,就是讓block元素無視float元素,讓inline元素讓流水一樣圍繞著float元素來實現浮動佈局。 文字環繞圖片是float典型的應用場景,如下所示:
html程式碼
<img class="float" src="image/HC5450_15-IMS-zh_CN.jpg" />
<p class="around">華夏之大,有造物之工師,兼創器之良匠,留下傳世之美。有些器物,不僅僅需要玻璃罩的保護,更需要心手合一的把玩。摩挲盤桓,實為棲心之境。古而近雅,追求老器物絕不是一味的泥古,而是追求內心的安定,古物經歷過時間,消除了火氣,更顯得雍穆沉靜。不入古境,不解其情,若入古境,自得況味,這便是時間的藝術。</p>
css程式碼
.float{
float:left;
width:100px;
height: auto;
margin: 10px;
}
.around{
width:300px;
color:#fff;
background: #009F95;
padding: 10px;
}
由上圖可以看出,img元素設定了float:left之後會脫離文件流而居於左側存在。而p元素無視img元素的存在,從視窗的左上角開始流入,但是p元素中的文字意識到img元素的存在而環繞圖片流入。並且img元素是漂浮在p元素的上層。
二、float元素特性
1.塊級框
不管一個元素是行內元素還是塊級元素,如果被設定了浮動,那浮動元素會生成一個塊級框,可以設定它的width和height,因此float常常用於製作橫向配列的選單,可以設定大小並且橫向排列。
(1)先來看一個塊級元素的例子:
html程式碼
<div class="div1">
<img src="image/pic1.png" />
</div>
<div class="div2">
<img src="image/pic2.png" />
</div>
css程式碼
.div1{
padding: 10px;
border: 3px solid black;
}
.div2 {
float: left;
padding:10px;
border: 3px solid red;
}
預設情況下,div元素的寬是100%,一旦讓該div浮動起來,立刻會像inline元素一樣產生包裹性,寬度會跟隨內容自適應。
(2)接著看下行內元素的例子:
html程式碼
<div class="box">
<span class="menu">首頁</span>
<span class="menu">訊息</span>
<span class="menu">朋友</span>
<span class="menu">我的</span>
</div>
css程式碼
.box{
width: 500px;
background: pink;
height: 200px;
}
.menu{
width: 100px;
float: left;
margin: 10px;
padding: 10px;
background: #eee;
text-align: center;
}
由上圖可見,當span設定float屬性後,可以指定width,height值。 同時可以發現,當多個元素指定為float且同時為left/right時,元素是緊挨著排列,行內寬度不夠時再換行排列。
2.高度崩塌
html程式碼
<div class="div1">
<img src="image/pic1.png" />
</div>
<div class="div2">
<img src="image/pic2.png" />
</div>
css程式碼
.div1{
padding: 10px;
border: 3px solid black;
}
.div2 {
border: 3px solid red;
}
.div2 img{
float: left;
padding:10px;
}
將float屬性設定給div2內部的img元素,可以看出div2的高度並沒有img元素被撐起來,因此又叫高度崩塌。
原因:將img元素設定為浮動元素,所以脫離文件流。因此div2中認為沒有元素,所以產生了高度崩塌。具體怎麼解決高度崩塌,後面再介紹。
三、clear屬性
clear屬性的作用是清除浮動。
clear : none | left | right | both;
none : 預設值。允許兩邊都可以有浮動物件
left : 不允許左邊有浮動物件
right : 不允許右邊有浮動物件
both : 不允許有浮動物件
html程式碼
<div class="bg1"></div>
<div class="bg2"></div>
css程式碼
.bg1{
width:200px;
height: 200px;
border: 3px solid black;
background: url(image/pic2.png);
float: left;
}
.bg2{
width:500px;
height: 300px;
border: 3px solid red;
background: url(image/pic1.png);
}
如上圖所示,由於bg1是浮動元素,所以bg2在bg1底層鋪展。
如果想要讓bg2換行排列,居於bg1底端下方(如下圖),這個時候就要用到clear屬性了。
css程式碼中,只需要在bg2中加入 clear:left 即可
.bg1{
width:200px;
height: 200px;
border: 3px solid black;
background: url(image/pic2.png);
float: left;
}
.bg2{
width:500px;
height: 300px;
border: 3px solid red;
background: url(image/pic1.png);
clear: left;
}
對於CSS的清除浮動(clear),一定要牢記:這個規則只能影響使用清除的元素本身,不能影響其他元素。
以上圖例子說明。bg1和bg2都設定了float:left。如果在bg1樣式中新增樣式clear:right,來迫使bg2下移,則沒有任何效果。因為這個清除浮動是在bg1中呼叫的,她只能影響bg1,不能影響到bg2。
要想要bg2下移,就必須在bg2的樣式中使用浮動 clear:left。用來指定bg2元素左邊不允許出現浮動元素。
電腦刺繡繡花廠 http://www.szhdn.com 廣州品牌設計公司https://www.houdianzi.com
四、BFC
1.BFC的介紹
定義:
一些元素,如float元素,如position為absolute,block為inline-block,table-cell或table-caption的元素,以及overflow屬性不為visible的元素,它們將會建立一個新的塊級格式化上下文(Block Formatting Context),也就是我們所說的BFC。
形成
BFC也是HTML中的一個盒子(看不見而已),只有滿足至少下列條件之一才能形成BFC:
① float屬性不為none.
② position屬性不為static和relative.
③ display屬性為下列之一:table-cell,table-caption,inline-block, flex,inline-flex.
④ overflow屬性不為visible.
佈局規則
① 內部的Box會在垂直方向,一個接一個地放置。
② Box垂直方向的距離由margin決定。屬於同一個BFC的兩個相鄰Box的margin會發生重疊。
③ BFC的區域不會與float box重疊。
④ BFC就是頁面上的一個隔離的獨立容器,容器裡面的子元素不會影響到外面的元素。
⑤ 計算BFC的高度時,浮動元素也參與計算。
2、BFC的作用
(1)容納浮動元素
就是解決上面遇到的高度崩塌問題。
只需要將div2的css程式碼改動一下,增加一個BFC來容納浮動元素。
.div1{
padding: 10px;
border: 3px solid black;
}
.div2 {
overflow:hidden;
border: 3px solid red;
}
.div2 img{
float: left;
padding:10px;
}
除此之外,解決高度崩塌問題,還有如下解決方法:
增加一個清除浮動的子元素
html程式碼
<div class="div1">
<img src="image/pic1.png" />
</div>
<div class="div2">
<img src="image/pic2.png" />
<div style="clear:both"></div>
</div>
(2)阻止文字換行
大多數情況(若沒有特殊設定),如Figure1,文字將會環繞浮動元素,但有時候這並不是我們期望的。我們期待的是Figure2如圖:
想達到圖二的效果,只需要將右邊文字區域變成一個BFC即可。
css程式碼如下:
.float{
float:left;
width:100px;
height: auto;
margin: 10px;
}
.around{
width:300px;
color:#fff;
background: #009F95;
padding: 10px;
overflow: hidden;
}
(3)消除Margin Collapse (外邊距坍塌)
在正常情況下,在一個容器內的所有box將會由上至下依次垂直排列,即我們所說的一個元素佔一行,並切垂直相鄰的距離(即margin)是由各自的margin決定的,而不是兩個margin的疊加。
讓我們看一個例子:
HTML程式碼:
<div class="container">
<p>list 1</p>
<p>list 2</p>
<p>list 3</p>
</div>
css程式碼:
.container {
width: 300px;
background-color: black;
overflow: hidden;
}
p {
background-color: white;
margin: 20px 0;
text-align: center;
}
理想情況下,我們會認為p標籤之間的margin應該是它們的和(20px*2=40px),但實際上卻是20px.這其實是collapsing margins(外邊距坍塌)。其中flex佈局不存在collapsing margins,水平方向上也不存在collapsing margins。
利用BFC能消除collapsing margins。緊記只有當元素在同一個BFC中時,垂直方向上的margin才會clollpase。如果它們屬於不同的BFC,則不會有margin collapse。因此我們可以再建立一個BFC去阻止margin collpase的發生。
所以為了讓他們的margins變成40px,我們只需要用div,建立一個BFC,令p元素處於不同BFC即可。
html程式碼:
<div class="container">
<p>list 1</p>
<p>list 2</p>
<div class="newBFC">
<p>list 3</p>
</div>
</div>
css程式碼:
.container {
width: 300px;
background-color: black;
overflow: hidden;
}
p {
background-color: white;
margin: 20px 0;
text-align: center;
}
.newBFC {
overflow: hidden;
}