目錄
一、css的定位機制
二、浮動解決的問題
1.塊級元素併排排放
2.實質上：塊級元素變成行內級元素
3.注意事項：
4.偽類選擇器：
（1）語法：
三、浮動的語法格式
四、浮動的影響及解決辦法
1.影響
2.解決方法（清除浮動）
（1）給父盒子設定寬高
（2）給父元素加 overflow:hidden
（3）前輩 clear:both / left / right
（4）偽元素
標準流（普通流）
乙個網頁內標籤元素正常從上到下，從左到右排列順序的意思，比如塊級元素會獨佔一行，行內元素會按順序依次前後排列；按照這種大前提的布局排列之下絕對不會出現例外的情況叫做普通流布局。
浮動設定了浮動屬性的元素會脫離標準普通流的控制，移動到其父元素中指定位置的過程。
用來做一些文字混排效果
定位
元素新增浮動後，元素會具有行內塊元素的特性。元素的大小完全取決於定義的大小或者預設的內容多少
浮動的元素總是找離它最近的父級元素對齊但是不會超出內邊距的範圍
浮動脫離標準流，不佔位置，會影響標準流。浮動只有左右浮動。
標籤名、類名的父元素的第乙個孩子
選擇器、類名：first-child
不浮動就是標準流併排的元素必須同時加浮動屬性，才能併排
浮動元素會脫離標準流，原來的盒子的高沒了，底下的盒子會占領併排盒子的位子
解決的是：父盒子高度塌陷（高度不存在）
第乙個盒子
第二個盒子
第三個盒子
不實際
.father
溢位隱藏
.father
屬性必須依附於物件（標籤）存在
增加文件樹，使得文件樹太龐大，影響使用者體驗
沒有實現樣式與結構相分離
前輩 clear:both，能不能創造乙個標籤，不屬於文件樹，又起到標籤的效果
在樣式css上創造標籤（偽元素）
偽元素預設是乙個行內元素，清除浮動影響必須得是個塊級元素， display:block
.clearfix::after,.clearfix::before
偽元素的語法格式：選擇器：：after{
選擇器：：before{
我是div標籤，你是啥呀
Float浮動布局
什麼是浮動布局？浮動可以設定元素，脫離正常的文件流，向右或者向左，靠近父元素的邊緣或者是設定了浮動的其他的元素的邊緣靠攏。比如，我們使用div等塊標籤的時候，它們都是獨佔一行，但是很多時候要將多個div併排放置，這種情況就可以使用浮動布局。浮動可以那些問題？使用浮動布局之後 這裡也是可以使用浮動解決...
CSS 06核心 浮動
人生苦短，要學就只學有用的 前端教學 css 1 css核心 浮動float 理解應用 網頁布局的核心 就是用 css 來擺放盒子。css 提供了3 種機制來設定盒子的擺放位置，分別是普通流 標準流 浮動和定位，其中 普通流 標準流 行內元素會按照順序，從左到右順序排列，碰到父元素邊緣則自動換行 浮...
CSS 06核心 浮動
人生苦短，要學就只學有用的 前端教學 css 1 css核心 浮動float 理解應用 網頁布局的核心 就是用 css 來擺放盒子。css 提供了3 種機制來設定盒子的擺放位置，分別是普通流 標準流 浮動和定位，其中 普通流 標準流 行內元素會按照順序，從左到右順序排列，碰到父元素邊緣則自動換行 浮...