浮動
元素的浮動是指設定了浮動屬性的元素會脫離標準普通
流的控制，移動到其父元素中指定位置的過程。
語法: float :
left
right
none(預設)
注意:1. 浮動的元素要有父元素
2. 浮動後的元素類似元素行內塊元素,即使行內元
素浮動後也可以設定寬高.(類似不代表是,浮動後的盒子可以設定寬高，但是不能用行內塊的方式讓盒子居中，比 如：給浮動的盒子父元素新增 text-algin ：center ；是不起作用的；需要給盒子margin才能調整其位置)
3. 浮動的元素會脫離文件流,但是沒有脫離文字流
浮動帶來的影響：
父元素高度塌陷 : 子元素浮動,父元素沒有設定高,子元素
不能把父元素的高給撐開,導致父元素沒有高度,這種現
象叫父元素高度塌陷 .
清除浮動
1.加固定的高
缺點:不靈活
2.額外標籤法
在父元素的末尾加乙個空div, 給父元素設定
clear:left/right/both
優點： 通俗易懂，書寫方便
缺點： 新增許多無意義的標籤，結構化較差。
3.父級新增overflow屬性方法
在父元素身上設定 : 除了visible以外的其他overflow
的值都可以 , overflow:hidden/scroll/ auto
原因: 是overflow觸發了bfc, 在計算bfc高度的時
候,浮動的子元素的高度也計算在內
優點:**簡潔
缺點 :無法顯示需要溢位的元素
4.使用after偽元素清除浮動
優點 : 結構語義化正確
缺點 : 由於ie67不支援:after，使用 zoom:1
1.clearfix:after
6.clearfix
定位
1.postion: static 預設值 靜態定位
2.postion : relative : 相對定位
特點 : 不脫離文件流 ,以自身的位置來定位的
應用場景 :
微調元素
做絕對定位的參考，子絕父相
3.position:fixed : 固定定位
不管怎麼滾動滾動條,始終固定在某個位置
特點 : 脫離了文件流,以瀏覽器視窗來定位的
4.position:absolute : 絕對定位
特點 : 脫離了文件流, 以最近已定位的」父元素」的位置來
說的,如果父元素都沒有定位,以html的位置來說的
備註 :已定位的」父元素」可以是 絕對定位/ 相對定位/固
定定位,子絕父相用的最多
方向關鍵字
left : 正值是向右走的 負值往左走
top : 正值是向下走的 負值往下走
right : 正值是向左走的 負值往右走
bottom : 正值是向上走的 負值往下走
注意: static定位身上不能用方向關鍵字
脫離文件流的元素
1.固定定位
2.絕對定位
3.浮動
特點 : 類似於行內塊元素,如果不設定寬高,它的寬高是由
內容撐開的,即使是行內元素,可以設定寬高
如何讓定位的盒子垂直居中:
178
浮動定位區別
css2中能夠使標籤脫離文件流的屬性有：
float:left/right;
postion:absolute/fixed;
float脫離文件流時，其他盒子會無視這個標籤，但其他
盒子內的文字、、表單標籤依然會為這個標籤讓出
位置，環繞在周圍( 脫離文件流，不脫離文字流 )。
position脫離文件流的標籤，其他盒子完全無視它，包括
標籤內部的文字、、表單標籤（ 既脫離文件流，又脫離文字流 ）
注意：所有的標籤都能夠使用以上屬性，脫離文件流之後
1. 不再區分塊級和行內標籤，類似行內塊元素。
2. 寬高預設由內容撐開，可以設定width和height及所有
盒模型屬性,即使行內元素也可以設定寬高
css 浮動 相對定位 絕對定位區別
html是按照檔案流 普通流 的方式載入的，但是全部是普通流的話，很多好看的樣式是實現不了的，所以出現了浮動，相對定位，絕對定位的概念。一 首先，按照普通流和非普通流來分類 普通流 就是按照上下左右的順序一行一行排列的，長度不夠就會自動擠到下一行。非普通流 顧名思義就是脫離普通流的，在普通流上面是不...
css 浮動 相對定位 絕對定位區別
html是按照檔案流 普通流 的方式載入的，但是全部是普通流的話，很多好看的樣式是實現不了的，所以出現了浮動，相對定位，絕對定位的概念。一 首先，按照普通流和非普通流來分類 普通流 就是按照上下左右的順序一行一行排列的，長度不夠就會自動擠到下一行。非普通流 顧名思義就是脫離普通流的，在普通流上面是不...
浮動和定位的區別
動 float 和絕對定位 position absolute 相同點 1 都是漂起來 離開原來的位置 2 並且都不佔著原來的位置 3 另外，如h1包文字的標籤，預設只設height的情況下，它的width是鋪滿父元素的寬度的，而當浮動或絕對定位後，它的寬度就是h1內文字的寬度 不同點 float後...