整合營銷服務商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
么是 CSS Float（浮動）？
CSS 的 Float（浮動），會使元素向左或向右移動，其周圍的元素也會重新排列。
Float（浮動），往往是用于圖像，但它在布局時一樣非常有用。
元素怎樣浮動
元素的水平方向浮動，意味著元素只能左右移動而不能上下移動。
一個浮動元素會盡量向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。
浮動元素之后的元素將圍繞它。
浮動元素之前的元素將不會受到影響。
如果圖像是右浮動，下面的文本流將環(huán)繞在它左邊：
實例
img
{
float:right;
}
彼此相鄰的浮動元素
如果你把幾個浮動的元素放到一起，如果有空間的話，它們將彼此相鄰。
在這里，我們對圖片廊使用 float 屬性：
實例
.thumbnail
{
float:left;
width:110px;
height:90px;
margin:5px;
}
清除浮動 - 使用 clear
元素浮動之后，周圍的元素會重新排列，為了避免這種情況，使用 clear 屬性。
clear 屬性指定元素兩側不能出現(xiàn)浮動元素。
使用 clear 屬性往文本中添加圖片廊：
實例
.text_line
{
clear:both;
}
嘗試一下 ?
更多實例
為圖像添加邊框和邊距并浮動到段落的左側
讓我們?yōu)閳D像添加邊框和邊距并浮動到段落的左側
標題和圖片向右側浮動
讓標題和圖片向右側浮動。
讓段落的第一個字母浮動到左側
改變樣式，讓段落的第一個字母浮動到左側。
創(chuàng)建一個沒有表格的網(wǎng)頁
使用 float 創(chuàng)建一個網(wǎng)頁頁眉、頁腳、左邊的內(nèi)容和主要內(nèi)容。
CSS 中所有的浮動屬性
"CSS" 列中的數(shù)字表示不同的 CSS 版本（CSS1 或 CSS2）定義了該屬性。
| 屬性 | 描述 | 值 | CSS |
|---|---|---|---|
| clear | 指定不允許元素周圍有浮動元素。 | leftrightbothnoneinherit | 1 |
| float | 指定一個盒子（元素）是否可以浮動。 | leftrightnoneinherit | 1 |
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！
文首發(fā)自「慕課網(wǎng)」，想了解更多IT干貨內(nèi)容，程序員圈內(nèi)熱聞，歡迎關注！
作者| 慕課網(wǎng)精英講師 Lison
這篇文章我們了解一下 JavaScript 中現(xiàn)有的八個數(shù)據(jù)類型，當然這并不是 JavaScript 中的所有數(shù)據(jù)類型，而是現(xiàn)在版本的 TypeScript 支持的基本類型，在學習基礎類型之前，我們先來看下如何為一個變量指定類型：
為一個變量指定類型的語法是使用"變量: 類型"的形式，如下：
let num: number = 123如果你沒有為這個變量指定類型，編譯器會自動根據(jù)你賦給這個變量的值來推斷這個變量的類型：
let num = 123
num = 'abc' // error 不能將類型“"123"”分配給類型“number”當我們給num賦值為123但沒有指定類型時，編譯器推斷出了num的類型為number數(shù)值類型，所以當給num再賦值為字符串"abc"時，就會報錯。
這里還有一點要注意，就是number和Number的區(qū)別：TS中指定類型的時候要用number，這個是TypeScript的類型關鍵字。而Number為JavaScript的原生構造函數(shù)，用它來創(chuàng)建數(shù)值類型的值，它倆是不一樣的。包括你后面見到的string、boolean等都是TypeScript的類型關鍵字，不是JavaScript語法，這點要區(qū)分開。接下來我們來看下，這八個JS中你見過的類型。
類型為布爾類型的變量的值只能是 true 或 false，如下：
let bool: boolean = false;
bool = true;
bool = 123; // error 不能將類型"123"分配給類型"boolean"當然了，賦給 bool 的值也可以是一個計算之后結果是布爾值的表達式，比如：
let bool: boolean = !!0
console.log(bool) // falseTypeScript 和 JavaScript 一樣，所有數(shù)字都是浮點數(shù)，所以只有一個number類型，而沒有int或者float類型。而且 TypeScript 還支持 ES6 中新增的二進制和八進制數(shù)字字面量，所以 TypeScript 中共支持二、八、十和十六四種進制的數(shù)值。
let num: number;
num = 123;
num = "123"; // error 不能將類型"123"分配給類型"number"
num = 0b1111011; // 二進制的123
num = 0o173; // 八進制的123
num = 0x7b; // 十六進制的123字符串類型中你可以使用單引號和雙引號包裹內(nèi)容，但是可能你使用的 tslint 規(guī)則會對引號進行檢測，使用單引號還是雙引號可以在 tslint 規(guī)則里配置。你還可以使用 ES6 語法——模板字符串，拼接變量和字符串更為方便。
let str: string = "Lison";
str = "Li";
const first = "Lison";
const last = "Li";
str = `${first} ${last}`;
console.log(str) // 打印結果為:Lison Li另外還有個和字符串相關的類型：字符串字面量類型。即把一個字符串字面量作為一種類型，比如上面的字符串"Lison"，當你把一個變量指定為這個字符串類型的時候，就不能再賦值為其他字符串值了，如：
let str: 'Lison'
str = 'haha' // error 不能將類型“"haha"”分配給類型“"Lison"”在 TypeScript 中有兩種定義數(shù)組的方式：
let list1: number[] = [1, 2, 3];
let list2: Array<number> = [1, 2, 3];第一種形式通過number[]的形式來指定這個類型元素均為number類型的數(shù)組類型，這種寫法是推薦的寫法，當然你也可以使用第二種寫法。注意，這兩種寫法中的number指定的是數(shù)組元素的類型，你也可以在這里將數(shù)組的元素指定為任意類型。如果你要指定一個數(shù)組里的元素既可以是數(shù)值也可以是字符串，那么你可以使用這種方式：number|string[]，這種方式我們在后面學習聯(lián)合類型的時候會講到。
當你使用第二種形式定義時，tslint 可能會警告讓你使用第一種形式定義，如果你就是想用第二種形式，可以通過在 tslint.json 的 rules 中加入"array-type": [false]關閉 tslint 對這條的檢測。
后面我們講接口的時候，還會講到數(shù)組的一個特殊類型：ReadonlyArray，即只讀數(shù)組。
null 和 undefined 有一些共同特點，所以我們放在一起講。說它們有共同特點，是因為在 JavaScript 中，undefined 和 null 是兩個基本數(shù)據(jù)類型。在 TypeScript 中，這兩者都有各自的類型即 undefined 和 null，也就是說它們既是實際的值，也是類型，來看實際例子：
let u: undefined = undefined;// 這里可能會報一個tslint的錯誤：Unnecessary initialization to 'undefined'，就是不能給一個值賦undefined，但我們知道這是可以的，所以如果你的代碼規(guī)范想讓這種代碼合理化，可以配置tslint，將"no-unnecessary-initializer"設為false即可
let n: null = null; 默認情況下 undefined 和 null 可以賦值給任意類型的值，也就是說你可以把 undefined 賦值給 void 類型，也可以賦值給 number 類型。當你在 tsconfig.json 的"compilerOptions"里設置了"strictNullChecks": true時，那必須嚴格對待。undefined 和 null 將只能賦值給它們自身和 void 類型，void類型我們后面會學習。
object 在 JS 中是引用類型，它和 JS 中的其他基本類型不一樣，像 number、string、boolean、undefined、null 這些都是基本類型，這些類型的變量存的是他們的值，而 object 類型的變量存的是引用，看個簡單的例子：
let strInit = "abc";
let strClone = strInit;
strClone = "efg";
console.log(strInit); // 'abc'
let objInit = { a: "aa" };
let objClone = objInit;
console.log(objClone) // {a:"aa"}
objInit.a = "bb";
console.log(objClone); // { a: 'bb' }通過例子可以看出，我們修改 objInit 時，objClone 也被修改了，是因為 objClone 保存的是 objInit 的引用，實際上 objInit 和 objClone 是同一個對象。
當我們希望一個變量或者函數(shù)的參數(shù)的類型是一個對象的時候，使用這個類型，比如：
let obj: object
obj = { name: 'Lison' }
obj = 123 // error 不能將類型“123”分配給類型“object”這里有一點要注意了，你可能會想到給 obj 指定類型為 object 對象類型，然后給它賦值一個對象，后面通過屬性訪問操作符訪問這個對象的某個屬性，實際操作一下你就會發(fā)現(xiàn)會報錯：
let obj: object
obj = { name: 'Lison' }
console.log(obj.name) // error 類型“object”上不存在屬性“name”這里報錯說類型 object 上沒有 name 這個屬性。如果你想要達到這種需求你應該使用我們后面章節(jié)要講到的接口，那 object 類型適合什么時候使用呢？我們前面說了，當你希望一個值必須是對象而不是數(shù)值等類型時，比如我們定義一個函數(shù)，參數(shù)必須是對象，這個時候就用到object類型了：
function getKeys (obj: object) {
return Object.keys(obj) // 會以列表的形式返回obj中的值
}
getKeys({ a: 'a' }) // ['a']
getKeys(123) // error 類型“123”的參數(shù)不能賦給類型“object”的參數(shù)這里你要明白object類型的使用。
Symbol 是 ES6 加入的新的基礎數(shù)據(jù)類型，因為它的知識比較多。
本篇文章我們總結了八個在JavaScript中我們就見過的數(shù)據(jù)類型，它們是：布爾類型、數(shù)值類型、字符串、數(shù)組、null、undefined、object以及ES6中新增的symbol。在TypeScript中它們都有對應的類型關鍵字，對應關系為：
這些類型是基礎，我們后面的高級類型很多都是它們的組合或者變形，所以一定要把這些基礎先學會。
歡迎關注「慕課網(wǎng)」，發(fā)現(xiàn)更多IT圈優(yōu)質(zhì)內(nèi)容，分享干貨知識，幫助你成為更好的程序員！
、有float屬性的元素會跑
代碼：<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
CSS：div{ width: 50px; height: 50px; }
#box1{background: blue; float: left;}
#box2{ background: red;float: left; }
#box3{background: black;float: left; }
在瀏覽器中的樣式：
從圖中可以看出，div本為塊級標簽，本應各自占一行，但是添加浮動屬性之后，都向左浮動，跑到了一排。
二、如果上一行沒有float元素，那么float元素是跑不上去的
代碼：<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
CSS：div{ width: 50px; height: 50px; }
#box1{background: blue;}
#box2{ background: red;float: left; }
#box3{background: black;float: left; }
從圖中可以看出，div1沒有floa屬性，所以div2不能浮動上去；而div2有浮動屬性，所以div3會浮動上來。
三、有float屬性的元素是脫離文檔流的，非浮動元素會忽略掉前面的浮動元素
代碼：<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
CSS：div{ width: 50px; height: 50px; }
#box1{background: blue;float:left;}
#box2{ background: red;float: left; }
#box3{background: black;width:150px;height:100px; }
在瀏覽器中的樣式：
從圖中可以看出，div1和div2浮動在文檔之上，div3忽略了div1和div2，div1和div2沒有影響div3的位置。
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
