人生苦短，要學就只學有用的理解應用【前端教學-css-1】
css核心--浮動float
網頁布局的核心——就是用 css 來擺放盒子。css 提供了3 種機制來設定盒子的擺放位置，分別是普通流（標準流）、浮動和定位，其中：
普通流（標準流）
行內元素會按照順序，從左到右順序排列，碰到父元素邊緣則自動換行；
浮動
定位
概念：元素的浮動是指設定了浮動屬性的元素會
脫離標準普通流的控制
移動到指定位置。
作用讓多個盒子(div)水平排列成一行，使得浮動成為布局的重要手段。
可以實現盒子的左右對齊等等..
浮動最早是用來控制，實現文字環繞的效果。
語法在 css 中，通過float中文， 浮 漏 特 屬性定義浮動，語法如下：
選擇器描述none元素不浮動（預設值）
left元素向左浮動
right元素向右浮動
特點；通過float----- 浮 漏 特
1). 浮動口訣之 浮
浮動——漂浮在普通流的上面。 脫離標準流。 俗稱 「脫標」
小結：
2). 浮動口訣之 漏
浮動——漏浮動的盒子，把自己原來的位置漏給下面標準流的盒子，就是不占有原來位置，是脫離標準流的，我們俗稱 「脫標」。
.box1
.box2
來來來，我們看個立體圖
3). 浮動口訣之 特
浮動——特性 float屬性會改變元素display屬性。
任何元素都可以浮動。浮動元素會生成乙個塊級框，而不論它本身是何種元素。 生成的塊級框和我們前面的行內塊極其相似。
體驗案例——div 水平排列
div
.two
我們使用浮動的核心目的——讓多個塊級盒子在同一行顯示。 因為這是我們最常見的一種布局方式float——浮漏特特點
說明浮加了浮動的盒子是浮起來的，漂浮在其他標準流盒子的上面。
漏加了浮動的盒子是不佔位置的，它原來的位置漏給了標準流的盒子。
特特別注意：浮動元素會改變display屬性， 類似轉換為了行內塊，但是元素之間沒有空白縫隙
因為父級盒子很多情況下，不方便給高度，但是子盒子浮動就不占有位置，最後父級盒子高度為0，就影響了下面的標準流盒子。
清除浮動本質：
清除浮動主要為了解決父級元素因為子級浮動引起內部高度為0 的問題。清除浮動之後， 父級就會根據浮動的子盒子自動檢測高度。父級有了高度，就不會影響下面的標準流了
在css中，clear屬性用於清除浮動，在這裡，我們先記住清除浮動的方法，具體的原理，等我們學完css會再回頭分析。
選擇器 clear 清除描述left
不允許左側有浮動元素（清除左側浮動的影響）
right
不允許右側有浮動元素（清除右側浮動的影響）
both
同時清除左右兩側浮動的影響
但是我們實際工作中， 幾乎只用 clear: both;
1).額外標籤法(隔牆法)
是w3c推薦的做法是通過在浮動元素末尾新增乙個空的標籤例如
，或則其他標籤br等亦可。
可以給父級新增： overflow為 hidden| auto| scroll 都可以實現。缺點： 內容增多時候容易造成不會自動換行導致內容被隱藏掉，無法顯示需要溢位的元素。
3).使用after偽元素清除浮動
:after 方式為空元素額外標籤法的公升級版，好處是不用單獨加標籤了
使用方法：
.clearfix:after
.clearfix /* ie6、7 專有 -主要是解決不同瀏覽器的相容性問題*/
使用方法：
.clearfix:before,.clearfix:after
.clearfix:after
.clearfix
子盒子浮動了
影響下面布局了，我們就應該清除浮動了。
清除浮動的方式
優點缺點
額外標籤法（隔牆法）
通俗易懂，書寫方便
新增許多無意義的標籤，結構化較差。
父級overflow:hidden;
書寫簡單
溢位隱藏我們常用方法
父級after偽元素
結構語義化正確
由於ie6-7不支援:after，相容性問題
父級雙偽元素
結構語義化正確
由於ie6-7不支援:after，相容性問題
後面兩種偽元素清除浮動，大家暫且會使用就好， 深入原理，我們後面學完偽元素再講。
CSS 06核心 浮動
人生苦短，要學就只學有用的 前端教學 css 1 css核心 浮動float 理解應用 網頁布局的核心 就是用 css 來擺放盒子。css 提供了3 種機制來設定盒子的擺放位置，分別是普通流 標準流 浮動和定位，其中 普通流 標準流 行內元素會按照順序，從左到右順序排列，碰到父元素邊緣則自動換行 浮...
CSS06 彈性布局
彈性布局 一種布局方式,主要解決某個元素中子元素的布局方式 父元素設定了display flex,讓所有子元素變成彈性布局 彈性布局的相關概念 1 容器 設定了display flex的元素,稱為容器 容器本身不是彈性布局.2 專案 真正發生彈性布局的子元素們稱為專案 3 主軸 4條 專案們排列方向...
CSS 06 彈性布局
1 彈性布局 彈性布局 一種布局方式,主要解決某個元素中子元素的布局方式 父元素設定了display flex,讓所有子元素變成彈性布局 彈性布局的相關概念 1 容器 設定了display flex的元素,稱為容器 容器本身不是彈性布局.2 專案 真正發生彈性布局的子元素們稱為專案 3 主軸 4條 ...