CSS

百度不在便捷，圖檔全部失效請多包涵。
前言
css定位機制
1. float屬性介紹（浮動）
- 1.1fioat（浮動）的基本知識
- 1.1fioat（浮動）的基本文法
- - 1.1.1靠左浮動
  - 1.1.1靠右浮動
2.使用float（浮動）後産生的為題
- 2.1 高度塌陷問題（浮動溢出）
- - 2.1.1例子1：
  - 2.1.2例子2：
3. clear（閉合浮動又稱清除浮動）
- 3.1 例子1：
- 3.2 例子2：
4.清除浮動常用方法（解決父元素塌陷）
- 4.1方法一（在浮動後添加一個空元素）
- 4.2方法二（給浮動的父元素添加 overflow：hidden；注：溢出：隐藏；）
- 4.3方法三（css3的:after僞元素）
總結

百度不在便捷，圖檔全部失效請多包涵。

前言

前面我們說過了CSS的背景樣式和表格樣式。本篇的内容主要講述float浮動。後續還會有JS 的篇章。

css定位機制

普通流（标準流）：預設狀态，元素自動從左向右，從上往下排列（寫文章的順序方式）。

浮動：本章講述

絕對定位：後續講述

1. float屬性介紹（浮動）

講述浮動之前，我們先回顧一下塊元素和行内元素

塊元素特征：1.獨占一行。2.能設定它的寬和高。3.預設寬度是父元素的100%寬度。

都那些标簽是塊元素：div,p,ul,li,ol,dl,dt,dd,h1-h6等。

行内元素特征：1.可以和其他元素同行顯示。2.不能能設定它的寬和高。3.寬高就是内容的寬高

都那些标簽是行内元素：em,a,i,u,b,span…等。

1.1fioat（浮動）的基本知識

1.隻能使元素向左或向右移動，不能上下移動。

2.浮動元素碰到包含框或者另一個浮動框，停止浮動。

3.浮動元素之後的元素将圍繞它，之前的不受影響。

4.浮動元素會脫離标準流。

1.1fioat（浮動）的基本文法

float:left;  靠左浮動
float:right; 靠右浮動
float:none;  不适用浮動

使用：

<div style=" width: 800px; height: 800px; border: 1px solid #000;">
	<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=43774975,2349639287&fm=26&gp=0.jpg"  />
	<p>
層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現HTML（标準通用标記語言的一個應用）或XML（标準通用标記語言的一個子集）等檔案樣式的計算機語言。CSS不僅可以靜态地修飾網頁，還可以配合各種腳本語言動态地對網頁各元素進行格式化。 [1] CSS 能夠對網頁中元素位置的排版進行像素級精确控制，支援幾乎所有的字型字号樣式，擁有對網頁對象和模型樣式編輯的能力。 [2] 
	</p>
</div>

效果：

我們用圖檔和文字來測試。

1.1.1靠左浮動

<div style=" width: 800px; height: 800px; border: 1px solid #000;">
	<img style="float:left;" src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=43774975,2349639287&fm=26&gp=0.jpg"  />
	<p>
層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現HTML（标準通用标記語言的一個應用）或XML（标準通用标記語言的一個子集）等檔案樣式的計算機語言。CSS不僅可以靜态地修飾網頁，還可以配合各種腳本語言動态地對網頁各元素進行格式化。 [1] CSS 能夠對網頁中元素位置的排版進行像素級精确控制，支援幾乎所有的字型字号樣式，擁有對網頁對象和模型樣式編輯的能力。 [2] 
	</p>
</div>

效果：

1.1.1靠右浮動

<div style=" width: 800px; height: 800px; border: 1px solid #000;">
	<img style="float:right;" src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=43774975,2349639287&fm=26&gp=0.jpg"  />
	<p>
層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來表現HTML（标準通用标記語言的一個應用）或XML（标準通用标記語言的一個子集）等檔案樣式的計算機語言。CSS不僅可以靜态地修飾網頁，還可以配合各種腳本語言動态地對網頁各元素進行格式化。 [1] CSS 能夠對網頁中元素位置的排版進行像素級精确控制，支援幾乎所有的字型字号樣式，擁有對網頁對象和模型樣式編輯的能力。 [2] 
	</p>
</div>

2.使用float（浮動）後産生的為題

2.1 高度塌陷問題（浮動溢出）

2.1.1例子1：

我們用一個寬高為400px 的大div 嵌套 3個高寬為100px的小div為例

<div style=" width: 400px; height: 400px; border: 1px solid #000;">
	<div style="width: 100px; height: 100px; background-color: #F00;">
		aaa
	</div>
	<div style="width: 100px; height: 100px; background-color: #0F0;">
		bbb
	</div>
	<div style="width: 100px; height: 100px; background-color: #00F;">
		ccc
	</div>
</div>

效果：

我們給 “aaa” div添加一個左浮動，看下有什麼效果。

<div style=" width: 400px; height: 400px; border: 1px solid #000; ">
	<div style="width: 100px; height: 100px; background-color: #F00; float:left;">
		aaa
	</div>
	<div style="width: 100px; height: 100px; background-color: #0F0;">
		bbb
	</div>
	<div style="width: 100px; height: 100px; background-color: #00F;">
		ccc
	</div>
</div>

我們發現綠色的div 不見了，文字“bbb”和"ccc"重疊了。我們再使用有浮動試一試。

<div style=" width: 400px; height: 400px; border: 1px solid #000; ">
	<div style="width: 100px; height: 100px; background-color: #F00; float:right;">
		aaa
	</div>
	<div style="width: 100px; height: 100px; background-color: #0F0;">
		bbb
	</div>
	<div style="width: 100px; height: 100px; background-color: #00F;">
		ccc
	</div>
</div>

因為浮動的關系，“aaa”div 會從标準文檔流中脫離出來。

是以下邊的“bbb”和“ccc”div 會往上走把“aaa ”div 的位置占有。

“bbb”文字屬于元素，前邊我們說過浮動元素之後的元素将圍繞它，但是因為“aaa”和“bbb”的高寬相等，是以“bbb”div裡的文字無法在“bbb”div向上顯示。

為了讓你更清楚的了解，我們把“bbb”的div寬高設定成200px

<div style=" width: 400px; height: 400px; border: 1px solid #000; ">
	<div style="width: 100px; height: 100px; background-color: #F00; float:left;">
		aaa
	</div>
	<div style="width: 200px; height: 200px; background-color: #0F0;">
		bbb
	</div>
	<div style="width: 100px; height: 100px; background-color: #00F;">
		ccc
	</div>
</div>

我們發現“bbb”的div向上移動，且它的元素（文字）在div中顯示且圍繞左浮動“aaa”div。

下面我們試一下，所有div 左浮動。

<div style=" width: 400px; height: 400px; border: 1px solid #000;">
	<div style="width: 100px; height: 100px; background-color: #F00; float:left;">
		aaa
	</div>
	<div style="width: 100px; height: 100px; background-color: #0F0; float:left;">
		bbb
	</div>
	<div style="width: 100px; height: 100px; background-color: #00F; float:left;">
		ccc
	</div>
</div>

這樣我們就實作了橫向展示的效果，它們實作的原理是：

先向前找是否有同向浮動的元素，沒有則緊貼父元素的邊，如果有則貼着前一同向浮動元素的另一側。

“aaa”div 左浮動是，沒找到同向浮動元素，緊貼父元素的左邊。

“bbb”div左浮動是，發現前面有同向浮動元素aaa，那就貼着aaa右邊站好。

“ccc”div左浮動是，發現前面有同向浮動元素bbb，那就貼着bbb右邊站好。

下面我們試一下，所有div 右浮動。

<div style=" width: 400px; height: 400px; border: 1px solid #000;">
	<div style="width: 100px; height: 100px; background-color: #F00; float:right;">
		aaa
	</div>
	<div style="width: 100px; height: 100px; background-color: #0F0; float:right;">
		bbb
	</div>
	<div style="width: 100px; height: 100px; background-color: #00F; float:right;">
		ccc
	</div>
</div>

同上一效果中黃色标記的文字所述。

2.1.2例子2：

我們用一個寬為400px 高為自适應的大div 嵌套 3個高寬為100px的小div為例

<div style=" width: 400px; border: 1px solid #000;">
	<div style="width: 100px; height: 100px; background-color: #F00;">
		aaa
	</div>
	<div style="width: 100px; height: 100px; background-color: #0F0;">
		bbb
	</div>
	<div style="width: 100px; height: 100px; background-color: #00F;">
		ccc
	</div>
</div>

我們給 “aaa” div添加一個左浮動，看下有什麼效果。

<div style=" width: 400px; border: 1px solid #000; ">
	<div style="width: 100px; height: 100px; background-color: #F00; float:left;">
		aaa
	</div>
	<div style="width: 100px; height: 100px; background-color: #0F0;">
		bbb
	</div>
	<div style="width: 100px; height: 100px; background-color: #00F;">
		ccc
	</div>
</div>

和例1效果幾乎相同。因為高度是自适應，“aaa”div脫離标準文檔流，是以“aaa”div 的高度沒有被計算進去

我們全部左浮動

<div style=" width: 400px; border: 1px solid #000; ">
	<div style="width: 100px; height: 100px; background-color: #F00; float:left;">
		aaa
	</div>
	<div style="width: 100px; height: 100px; background-color: #0F0; float:left;">
		bbb
	</div>
	<div style="width: 100px; height: 100px; background-color: #00F; float:left;">
		ccc
	</div>
</div>

元素自适應寬高，是根據所有子元素的寬合和高合，子元素浮動後不被計算在内。是以，子元素全部具有浮動效果事，父元素的寬高均會塌陷。

3. clear（閉合浮動又稱清除浮動）

clear:left;  清除左浮動
clear:right; 清除右浮動
clear:none;  不清除浮動
clear:both;  清除左右浮動

注：設定了float的元素會影響其他相鄰的元素，需要使用clear清除浮動，clear隻影響自身，不會對其他相鄰元素造成影響。

3.1 例子1：

我們用一個寬高為400px 的大div 嵌套 3個高寬為100px 且左浮動的小div 為例

<div style=" width: 400px; height: 400px; border: 1px solid #000;">
	<div style="width: 100px; height: 100px; background-color: #F00; float:left; ">
		aaa
	</div>
	<div style="width: 100px; height: 100px; background-color: #0F0; float:left;">
		bbb
	</div>
	<div style="width: 100px; height: 100px; background-color: #00F; float:left;">
		ccc
	</div>
</div>

下面我們清除aaa的左浮動。

<div style=" width: 400px; height: 400px; border: 1px solid #000;">
	<div style="width: 100px; height: 100px; background-color: #F00; float:left; clar:left; ">
		aaa
	</div>
	<div style="width: 100px; height: 100px; background-color: #0F0; float:left;">
		bbb
	</div>
	<div style="width: 100px; height: 100px; background-color: #00F; float:left;">
		ccc
	</div>
</div>

并沒有什麼變化，前面我們說過clear隻影響自身，不會對其他相鄰元素造成影響。

下面我們再清除bbb的左浮動。

<div style=" width: 400px; height: 400px; border: 1px solid #000;">
	<div style="width: 100px; height: 100px; background-color: #F00; float:left; clar:left; ">
		aaa
	</div>
	<div style="width: 100px; height: 100px; background-color: #0F0; float:left;  clar:left; ">
		bbb
	</div>
	<div style="width: 100px; height: 100px; background-color: #00F; float:left;">
		ccc
	</div>
</div>

clear隻影響自身，不會對其他相鄰元素造成影響。

下面我們再清除ccc的左浮動。

<div style=" width: 400px; height: 400px; border: 1px solid #000;">
	<div style="width: 100px; height: 100px; background-color: #F00; float:left; clar:left; ">
		aaa
	</div>
	<div style="width: 100px; height: 100px; background-color: #0F0; float:left;  clar:left; ">
		bbb
	</div>
	<div style="width: 100px; height: 100px; background-color: #00F; float:left; clar:left;">
		ccc
	</div>
</div>

clear隻影響自身，不會對其他相鄰元素造成影響。

3.2 例子2：

我們用一個寬高為400px== 的大div 嵌套 3個高寬為100px 且右浮動的小div 為例

<div style=" width: 400px; height: 400px; border: 1px solid #000;">
	<div style="width: 100px; height: 100px; background-color: #F00; float:right;">
		aaa
	</div>
	<div style="width: 100px; height: 100px; background-color: #0F0; float:right;">
		bbb
	</div>
	<div style="width: 100px; height: 100px; background-color: #00F; float:right;">
		ccc
	</div>
</div>

下面我們清除aaa的右浮動。

<div style=" width: 400px; height: 400px; border: 1px solid #000;">
	<div style="width: 100px; height: 100px; background-color: #F00; float:right; clar:right;">
		aaa
	</div>
	<div style="width: 100px; height: 100px; background-color: #0F0; float:right;">
		bbb
	</div>
	<div style="width: 100px; height: 100px; background-color: #00F; float:right;">
		ccc
	</div>
</div>

clear隻影響自身，不會對其他相鄰元素造成影響。

下面我們再清除bbb的右浮動。

<div style=" width: 400px; height: 400px; border: 1px solid #000;">
	<div style="width: 100px; height: 100px; background-color: #F00; float:right; clar:right;">
		aaa
	</div>
	<div style="width: 100px; height: 100px; background-color: #0F0; float:right; clar:right;">
		bbb
	</div>
	<div style="width: 100px; height: 100px; background-color: #00F; float:right;">
		ccc
	</div>
</div>

clear隻影響自身，不會對其他相鄰元素造成影響。

下面我們再清除bbb的右浮動。

<div style=" width: 400px; height: 400px; border: 1px solid #000;">
	<div style="width: 100px; height: 100px; background-color: #F00; float:right; clar:right; ">
		aaa
	</div>
	<div style="width: 100px; height: 100px; background-color: #0F0; float:right; clar:right;">
		bbb
	</div>
	<div style="width: 100px; height: 100px; background-color: #00F; float:right; clar:right;">
		ccc
	</div>
</div>

clear隻影響自身，不會對其他相鄰元素造成影響。

4.清除浮動常用方法（解決父元素塌陷）

例

<div style=" width: 400px; border: 1px solid #000; ">
	<div style="width: 100px; height: 100px; background-color: #F00; float:left;">
		aaa
	</div>
	<div style="width: 100px; height: 100px; background-color: #0F0; float:left;">
		bbb
	</div>
	<div style="width: 100px; height: 100px; background-color: #00F; float:left;">
		ccc
	</div>
</div>

4.1方法一（在浮動後添加一個空元素）

在style标簽内添加

.clear{
	clear:both;
}

在“ccc”div 後添加

為了友善示範寫成行内樣式

<div style=" width: 400px; border: 1px solid #000; ">
	<div style="width: 100px; height: 100px; background-color: #F00; float:left;">
		aaa
	</div>
	<div style="width: 100px; height: 100px; background-color: #0F0; float:left;">
		bbb
	</div>
	<div style="width: 100px; height: 100px; background-color: #00F; float:left;">
		ccc
	</div>
	<div class="clear" style="clear:both;"> </div>
</div>

成功解決！

4.2方法二（給浮動的父元素添加 overflow：hidden；注：溢出：隐藏；）

給大div 添加

overflow:hidden;
 zoom:1;  觸發hasLayout相容IE6,7

可能有人疑問：

overflow：hidden；不是應該把溢出的内容隐藏嗎？

在這裡用到overflow屬性觸發新的塊級格式上下文。

可以簡單了解成，建立了新的盒子把浮動元素包含起來。

<div style=" width: 400px; border: 1px solid #000;  overflow:hidden; zoom:1;">
	<div style="width: 100px; height: 100px; background-color: #F00; float:left;">
		aaa
	</div>
	<div style="width: 100px; height: 100px; background-color: #0F0; float:left;">
		bbb
	</div>
	<div style="width: 100px; height: 100px; background-color: #00F; float:left;">
		ccc
	</div>
</div>

成功解決！

4.3方法三（css3的:after僞元素）

複制到style标簽中

.clearfix:after{   
	content:'.';  内容為空 
	display:block; 轉化成塊元素
	height:0;       高度0
	visibility:hidden; 顯示隐藏
	clear:both;      清除所有浮動
}
.clearfix{
zoom:1;    觸發hasLayout相容IE6,7
}

class="clearfix"添加到父元素中。

用僞元素追加了一個空盒子。和方法一類似。

<div class="clearfix"  style="  width: 400px; border: 1px solid #000; ">
	<div style="width: 100px; height: 100px; background-color: #F00; float:left;">
		aaa
	</div>
	<div style="width: 100px; height: 100px; background-color: #0F0; float:left;">
		bbb
	</div>
	<div style="width: 100px; height: 100px; background-color: #00F; float:left;">
		ccc
	</div>
</div>

成功解決！

總結

本篇我們講述了浮動以及清除浮動的用法，還講述了幾種解決浮動導緻的父級元素塌陷的方法。

如本文章描述有誤請盡快聯系部落客！感謝您的閱讀與幫助！

CSS入門篇（float浮動）百度不在便捷，圖檔全部失效請多包涵。前言css定位機制1. float屬性介紹（浮動）2.使用float（浮動）後産生的為題3. clear（閉合浮動又稱清除浮動）4.清除浮動常用方法（解決父元素塌陷）總結

CSS

百度不在便捷，圖檔全部失效請多包涵。

前言

css定位機制

1. float屬性介紹（浮動）

1.1fioat（浮動）的基本知識

1.1fioat（浮動）的基本文法

1.1.1靠左浮動

1.1.1靠右浮動

2.使用float（浮動）後産生的為題

2.1 高度塌陷問題（浮動溢出）

2.1.1例子1：

2.1.2例子2：

3. clear（閉合浮動又稱清除浮動）

3.1 例子1：

3.2 例子2：

4.清除浮動常用方法（解決父元素塌陷）

4.1方法一（在浮動後添加一個空元素）

4.2方法二（給浮動的父元素添加 overflow：hidden；注：溢出：隐藏；）

4.3方法三（css3的:after僞元素）

總結

繼續閱讀

CSS的僞元素和僞類的差別

css僞類與僞元素差別

CSS中僞類和僞元素的差別

CSS的僞類與僞元素的差別

css中僞類與僞元素的差別

談談css的僞類和僞元素

僞類與僞元素的差別僞類與僞元素的差別

web前端布局練手項目

CSS----對字号的控制:Points, ems, pixels, 及其它機關,關鍵字,比例參數

趕工心得（一）

兩種清除浮動的方法

如何成為一名.net 工程師?

tabpanel 使用問題

CSS之折疊菜單

DOM下元素 offset client scroll 相關屬性簡介

IE8 CSS設定DIV居中，添加“margin:0 auto”