CSS float相關詳解

時間 2019-11-07

標籤 css float 相關詳解欄目 CSS 简体版

原文原文鏈接

float屬性是CSS經常使用的一個屬性，應用場景普遍，同時也是一個難點，涉及到一些相關細節及注意點。所以，就特別整理總結一下。css

1、float介紹

float元素也稱爲浮動元素，設置了float屬性的元素會根據屬性值向左或向右浮動。浮動元素會從普通文檔流中脫離，但浮動元素影響的不只是本身，它會影響周圍的元素對齊進行環繞。簡單來講，就是讓block元素無視float元素，讓inline元素讓流水同樣圍繞着float元素來實現浮動佈局。文字環繞圖片是float典型的應用場景，以下所示： html

html代碼

<img class="float" src="image1.jpg">
<p class="around">Harry Potter is a series of fantasy novels written by British author J. K. Rowling. The novels chronicle the life of a young wizard, Harry Potter, and his friends Hermione Granger and Ron Weasley, all of whom are students at Hogwarts School of Witchcraft and Wizardry. </p>
複製代碼

css代碼bash

.float{
	float:left;
	margin: 10px;
	width: 100px;
	height: 100px;
}
.around {
	background: #00ff90;
	width:300px;
	padding: 10px;
}
複製代碼

由上圖能夠看出，img元素設置了float：left以後會脫離文檔流而居於左側存在。而p元素無視img元素的存在，從窗口的左上角開始流入，可是p元素中的文字意識到img元素的存在而環繞圖片流入。而且img元素是漂浮在p元素的上層。佈局

2、float元素特性

1.塊級框

無論一個元素是行內元素仍是塊級元素，若是被設置了浮動，那浮動元素會生成一個塊級框，能夠設置它的width和height，所以float經常用於製做橫向配列的菜單，能夠設置大小而且橫向排列。flex

首先看一個塊級元素的例子。 ui

html代碼

<div class="div1">
		<img src="image1.jpg">
	</div>
	<div class="div2">
		<img src="image2.jpg">
	</div>
複製代碼

css代碼url

.div1{
	padding: 10px;
	border: 3px solid black;
}
.div2 {
	float: left;
	padding:10px;
	border: 3px solid red;
}
複製代碼

默認狀況下，div元素的寬是100%，一旦讓該div浮動起來，馬上會像inline元素同樣產生包裹性，寬度會跟隨內容自適應。spa

再來看下行內元素的例子： code

html代碼

<div class="box">
        <span class="rule1">
            首頁
        </span>
        <span class="rule1">
            發現
        </span>
        <span class="rule1">
            動態
        </span>
        <span class="rule1">
            個人
        </span>
    </div>
複製代碼

css代碼orm

.box { 
	background: #d32d2d; 
	padding: 10px; 
	width: 500px; 
	height: 400px; 
}
.rule1 { 
	float: left; 
	margin: 10px; 
	padding: 10px; 
	background: #eee; 
	width: 100px; 
	text-align: center; 
}
複製代碼

由上圖發現，當span設置float屬性後，能夠指定width，height值。同時能夠發現，當多個元素指定爲float且同時爲left/right時，元素是緊挨着排列，行內寬度不夠時再換行排列。

2.高度崩塌

html代碼

<div class="div1">
		<img src="image1.jpg">
	</div>
	<div class="div2">
		<img src="image2.jpg">
	</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="div1">
	</div>
	<div class="div2">
	</div>
複製代碼

css代碼

.div1{
	float: left;
	width: 300px;
	height: 150px;
	padding: 10px;
	border: 3px solid black;
	background-image: url("image1.jpg")
}
.div2 {

	border: 3px solid red;
	padding:10px;
	width:500px;
	height:200px;
	background-image: url("image2.jpg")
}
複製代碼

如上圖所示，因爲div1是浮動元素，因此div2在div1底層鋪展。若是想要讓div2換行排列，居於div1底端下方，這個時候就要用到clear屬性了。

css代碼

.div1{
	float: left;
	width: 300px;
	height: 150px;
	padding: 10px;
	border: 3px solid black;
	background-image: url("image1.jpg")
}
.div2 {
    clear: left;
	border: 3px solid red;
	padding:10px;
	width:500px;
	height:200px;
	background-image: url("image2.jpg")
}
複製代碼

只須要在div2中加入clear: left。

對於CSS的清除浮動(clear)，必定要牢記：這個規則只能影響使用清除的元素自己，不能影響其餘元素。

以上圖爲例子說明，div1和div2都設置了float：left。若是在div1的CSS樣式中添加clear:right，來迫使div2下移，則沒有任何效果。由於這個清除浮動是在div1中調用的，它只能影響div1，不能影響div2。要想讓div2下移，就必須在div2的CSS樣式中使用浮動。div2的左邊有浮動元素div1，所以只要在div2的CSS樣式中使用clear:left;來指定div2元素左邊不容許出現浮動元素，這樣div2就被迫下移一行。

4、BFC

爲何要介紹BFC，是由於它和float有着密切的關係。

1.BFC的介紹

定義

一些元素，如float元素，如position爲absolute,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會發生重疊
每一個元素的margin box的左邊，與包含塊border box的左邊相接觸(對於從左往右的格式化，不然相反)。即便存在浮動也是如此。
BFC的區域不會與float box重疊。
BFC就是頁面上的一個隔離的獨立容器，容器裏面的子元素不會影響到外面的元素。
計算BFC的高度時，浮動元素也參與計算

有些規則可能不太理解，看完下面的內容就會理解。

2.BFC做用

消除Margin Collapse

在正常狀況下，在一個容器內的全部box將會由上至下依次垂直排列，即咱們所說的一個元素佔一行，並切垂直相鄰的距離(即margin)是由各自的margin決定的，而不是兩個margin的疊加。

讓咱們看一個例子：

html代碼:

<div class="container">
  <p>條目 1</p>
  <p>條目 2</p>
  <p>條目 3</p>
</div>
複製代碼

css代碼:

.container {
	width: 300px;
  background-color: black;
  overflow: hidden;
}

p {
  background-color: white;
  margin: 10px 0;
  text-align: center;
}
複製代碼

理想狀況下，咱們會認爲p標籤之間的margin應該是它們的和(20px),但實際上倒是10px.這實際上是collapsing margins(外邊距坍塌)。其中flex佈局不存在collapsing margins，水平方向上也不存在collapsing margins。

利用BFC能消除collapsing margins。緊記只有當元素在同一個BFC中時，垂直方向上的margin纔會clollpase。若是它們屬於不一樣的BFC，則不會有margin collapse。所以咱們能夠再創建一個BFC去阻止margin collpase的發生。因此爲了讓他們的margins變成20，咱們只須要用div,創建一個BFC,令p元素處於不一樣BFC便可。

html代碼

<div class="container">
  <p>條目 1</p>
  <p>條目 2</p>
  <div class="newBFC">
  	  <p>條目 3</p>
  </div>
</div>
複製代碼

css代碼

.container {
	width: 300px;
  background-color: black;
  overflow: hidden;
}

p {
  background-color: white;
  margin: 10px 0;
  text-align: center;
}
.newBFC {
  overflow: hidden;
}
複製代碼

容納浮動元素

就是解決上面遇到的高度崩塌問題。

只須要將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="image1.jpg">
    </div>
    <div class="div2">
        <img src="image2.jpg">
        <div style="clear: both"></div>
    </div>
複製代碼

增長一個div元素，由於是清除元素，會在img元素底部顯示，所以會撐起div2高度。