CSS float相關介紹

1、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元素的上層。

2、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中認爲沒有元素，因此產生了高度崩塌。具體怎麼解決高度崩塌，後面再介紹。

3、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元素左邊不容許出現浮動元素。

4、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的高度時，浮動元素也參與計算。

二、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;
}