目錄
一、css的定位機制
二、基本語法
三、浮動特性及語法
1.塊級元素併排排放
2.實質上：塊級元素變成行內級元素
3、浮動特性以及注意事項
4、偽類選擇器
三、浮動的語法格式
四、浮動的影響及解決辦法
1.影響
2.解決方法（清除浮動）
元素的浮動是指設定了浮動屬性的元素會脫離標準普通流的控制，移動到其父元素中指定位置的過程。
標準流（普通流）： 乙個網頁內標籤元素正常從上到下，從左到右排列順序的意思，比如塊級元素會獨佔一行，行內元素會按順序依次前後排列；按照這種大前提的布局排列之下絕對不會出現例外的情況叫做普通流布局。
浮動 ： 設定了浮動屬性的元素會脫離標準普通流的控制，移動到其父元素中指定位置的過程。
用來做一些文字混排效果
在css中，通過float屬性來定義浮動，其基本語法格式如下：
選擇器left 元素向左浮動
right 元素向右浮動
none 元素不浮動（預設值）
元素新增浮動後，元素會具有行內塊元素的特性。元素的大小完全取決於定義的大小或者預設的內容多少
浮動的元素總是找離它最近的父級元素對齊但是不會超出內邊距的範圍
1、浮動首先建立包含塊的概念（包裹）。就是說， 浮動的元素總是找理它最近的父級元素對齊。但是不會超出內邊距的範圍。
2、浮動的元素排列位置，跟上乙個元素（塊級）有關係。如果上乙個元素有浮動，則a元素頂部會和上乙個元素的頂部對齊；如果上乙個元素是標準流，則a元素的頂部會和上乙個元素的底部對齊。
3、由2可以推斷出，乙個父盒子裡面的子盒子，如果其中乙個子級有浮動的，則其他子級都需要浮動。這樣才能一行對齊顯示。
4、浮動脫離標準流，不佔位置，會影響標準流。浮動只有左右浮動。
5、元素新增浮動後，元素會具有行內塊元素的特性。元素的大小完全取決於定義的大小或者預設的內容多少
6、浮動根據元素書寫的位置來顯示相應的浮動。
總結： 浮動 ---> 浮漏特
浮： 加了浮動的元素盒子是浮起來的，漂浮在其他的標準流盒子上面。
漏： 加了浮動的盒子，不佔位置的，它浮起來了，它原來的位置漏 給了標準流的盒子。
特： 特別注意，這是特殊的使用，有很多的不好處，使用要謹慎。
標籤名、類名的父元素的第乙個孩子
選擇器、類名：first-child
不浮動就是標準流浮動元素會脫離標準流，原來的盒子的高沒了，底下的盒子會占領併排盒子的位子
解決的是：父盒子高度塌陷（高度不存在）
第乙個盒子
第二個盒子
第三個盒子
（1）給父盒子設定寬高 (此種方法不實際)
溢位隱藏
.father
屬性必須依附於物件（標籤）存在
增加文件樹，使得文件樹太龐大，影響使用者體驗
沒有實現樣式與結構相分離
前輩 clear:both，能不能創造乙個標籤，不屬於文件樹，又起到標籤的效果
在樣式css上創造標籤（偽元素）
偽元素預設是乙個行內元素，清除浮動影響必須得是個塊級元素， display:block
.clearfix::after,.clearfix::before
偽元素的語法格式：選擇器：：after{
選擇器：：before{
我是div標籤，你是啥呀
布局的核心 浮動 float
目錄 一 css的定位機制 二 浮動解決的問題 1.塊級元素併排排放 2.實質上 塊級元素變成行內級元素 3.注意事項 4.偽類選擇器 1 語法 三 浮動的語法格式 四 浮動的影響及解決辦法 1.影響 2.解決方法 清除浮動 1 給父盒子設定寬高 2 給父元素加 overflow hidden 3 ...
浮動布局及清除浮動的方法
浮動元素的特點 1.脫離標準流的控制，浮動的盒子不再保留原先的位置 2.行內元素具有浮動，可直接設定寬高屬性 3.塊級元素沒設定寬度，預設寬度和父級一樣寬，但是新增浮動後，大小由內容決定 4.浮動的盒子中間沒有空隙為什麼清除浮動 很多情況下，父元素不方便設定高度，高度由子元素撐起，但子元素浮動，就會...
響應式布局之一 bootstrap柵格布局
bootstrap根據不同螢幕尺寸，選擇不同的柵格選項。一共有四種柵格選項，超小屏 手機 小屏 平板 中屏 桌面 大屏 超大桌面 柵格系統分為12列，即每行最多可容納12列。若里，乙個.row內包含的列 column 大於12個 即，一行中的柵格單元超過12個單元 則會自動排版，總之，一行只能最多1...