一、浮動
1.1css布局的三種機制：
1、普通流（標準流）
2、浮動
讓盒子從普通流中浮起來，主要作用讓多個塊級盒子一行顯示
3、定位
讓盒子定在瀏覽器的某乙個位置----css離不開定位，特別是後面的js特效
1.2為什麼需要浮動
如何讓多個盒子水平排列成一行？如何讓盒子左右對齊？
行內塊元素有缺陷：
1、它可以實現多個盒子一行顯示，但是中間會有空白縫隙，，不能滿足第乙個問題
2、他不能實現第二個問題，盒子左右對齊
1.3什麼是浮動
概念：元素浮動是指設定了浮動屬性的元素會脫離標準普通流的控制，移動到指定位置的過程
作用：浮動是最早用來控制，實現文字環繞的效果
讓多個盒子水平排列一行，使得浮動成為布局的重要手段
可以實現盒子左右對齊
1.4浮動口訣
float：屬性值；
屬性值描述
none
元素不浮動（預設值）
left
元素左浮動
right
元素右浮動
float：浮----漏-----特
（1）浮動口訣之 浮
漂浮在普通流的上面
浮動的盒子把原來的位置上漏給了下面標準流的盒子，就是不占有原來的位置，是脫離標準流的，俗稱「脫標」。
（3）浮動口訣之 特
浮動---特性 float屬性會改變display屬性
任何元素都可以浮動，浮動元素會生成乙個塊級框，而無論他本身是何種元素，生成的塊級框和我們前面的行內塊極其相似
小結：注意：
浮動的盒子互相靠在一起，但是如果父級寬度裝不下這些浮動的盒子，對出的盒子會另起一行對齊
特點說明
浮
加了浮動的盒子是浮起來的，漂浮在其他標準流盒子的上面
漏
加了浮動的盒子是不佔位置的，它原來的位置漏給了標準流的盒子特
特別注意：浮動元素會改變display屬性，類似轉換為行內塊，但是與元素之間沒有空白縫隙
1.5浮動的應用（重要）
浮動和標準流的父盒子搭配
小公尺案例
導航欄案例
如果直接用a，搜尋引擎容易辨別有堆砌關鍵字嫌疑（故意堆砌關鍵字容易被搜尋引擎有降權的風險），從而影響**排名
1.6 浮動的擴充套件
1）浮動元素與父盒子的關係
2）浮動元素與兄弟盒子的關係
在乙個父級盒子中，如果當 前乙個兄弟盒子是：
記住：浮動只會影響當前的或者是後面的盒子，不會影響前面的標準流
注意：如果乙個盒子裡面有多個子盒子，如果其中乙個浮動了，其他兄弟也應該浮動，防止引起問題
二、清除浮動
2.1為什麼要清除浮動？
因為父級盒子很多情況下，不方便給高度，但是子盒子浮動就不占有位置，最後父級盒子高度為0，就影響了下面的標準流盒子
子盒子是標準流，父盒子雖然沒有高度，但是會撐開父盒子高度
總結：由於浮動元素不占用原文件的位置，所以它對後面的元素排版產生影響
2.2清除浮動的本質
清除浮動主要是為了解決父級元素因為子級浮動引起內部高度為0的問題清除浮動之後，
父級就會根據浮動的子盒子自動檢測高度，父級有了高度，就不會影響下面的標準流。
2.3清除浮動的方法：
語法：選擇器
屬性值描述
left
不允許左側有浮動元素（清除左側浮動的影響）
right
不允許右側有浮動元素（清除右側浮動的影響）
both
同時清除左右兩側浮動的影響
但是我們實際工作中，幾乎都用clear：both；
（1）額外標籤法（隔牆法）
通過在浮動元素的末尾新增乙個空的標籤例如：
,或則其他標籤
等即可。
優點：通俗易懂，書寫方便
缺點：新增許多無意義的標籤，結構化差
父級選擇器 都可以實現，auto、scroll會加滾動條
優點：**簡潔
缺點：內容增多的時候容易造成不會自動換行導致內容被隱藏掉，
無法顯示溢位的元素
（3）使用after偽元素清除浮動
：after 方式為空元素額外標籤法的公升級版，好處是不用單獨加標籤了
使用方法：
.clearfix:after
.clearfix
缺點：由於ie6-7不支援：after，使用zoom：1觸發haslayout
（4）使用雙偽元素清除浮動
使用方法：
缺點：由於ie6-7不支援：after，使用zoom：1觸發haslayout
2.4清除浮動總結： 方法
優點
缺點
額外標籤法
通俗易懂，書寫方便
新增許多無意義的標籤，語義結構化較差
父級overflow：hidden
書寫方便
溢位隱藏
父級after偽元素
語義結構化正確
由於ie6-7不支援：after，相容性問題
腹肌雙偽元素
語義結構化正確
由於ie6-7不支援：after，相容性問題
三、photoshop切圖、
1、jpg影象格式
（.jpg）對色彩的資訊保留較好，高畫質，顏色較多，產品類的經常用jpg格式
2、gif影象格式
gif影象最多只能儲存256色，所以通常用來顯示簡單影象及字型，但是可以儲存透明背景和動畫效果
3、png影象格式
是一種新興的網路影象格式，結合了gif和jpg的優點，具有儲存形式豐富的特點，能夠保持透明背景
4、psd影象格式
psd格式是photoshop的專用格式，裡面可以存放圖層、通道、遮罩等多種設計圖稿
前端基礎筆記 CSS 04 浮動
清除浮動 1.普通流 標準流 2.浮動 讓盒子從普通流中浮起來，主要作用是讓多個塊級盒子在一行內顯示。3.定位 將某個盒子定位在瀏覽器的某一固定位置。float的語法 選擇器 例1 兩個普通流塊級元素各佔一行從上到下順序排列 當給乙個元素設定浮動之後，它就會 飄起來 例2 將三個塊級元素設定disp...
前端學習之CSS（04）布局
盒子模型 頁面元素的大小 邊框與其他元素的距離 定位機制 文件流浮動定位 層定位 盒子模型組成 charset utf 8 type text css box style head box 內容內容內容內容內容內容內容內容內容 內容內容內容內容內容內容 div body html overflow屬...
CSS文字換行詳細解說
本文列舉了相容 ie 和 ff 地換行 css 推薦樣式,詳細介紹了word wrap同word break地區別.相容 ie 和 ff 地換行 css 推薦樣式 最好地方式是 word wrap break word overflow hidden 而不是word wrap break word ...