浮動：使元素脫離文件流，按照一定的方式排列，遇到相鄰的浮動元素或者父級的邊界停下來。 可以往left，也可以往right 一般建議用ul.f>li.s編寫，（<ul></ul> unorder list無序標籤，需搭配li作為子標籤）, 用div也可以，但是有些浮動效果做不到。 特性： 1.浮動的元素排在同一排 2.浮動的元素內容撐開高度 3.浮動的元素支援所有的CSS樣式 4.浮動的元素脫離文件流 5.浮動的元素提升層級半級 浮動與行寬的關係 元素浮動後，沒有完全脫離文件流，它影響著文字的行寬 清浮動/BFC的方式(用來處理浮動元素拖脫離文件流的方法） 1.父級也浮動 弊端：左右的margin：0px auto；會失效 2.給父級加display：inline-block； 弊端：左右的margin：0px auto；會失效（如果需要讓元素居中，可以給父級加text-align：center；） 3.給父級加高 弊端：擴充套件性不好 4.br標籤 1⃣️<br/>換行 2⃣️<br clear="all"/>不推薦使用 5.clear：元素的某一方向不允許出現其他的浮動元素 clear：both；left、right、one。 使用clear：both的時候，需要注意書寫順序，順序不同有不同的影響 clear：both需要加在塊級標籤上才會有效 4和5不符合w3c規範，違反結構、樣式、行為，三者分離原則 6.給父級新增偽類子元素 ：after{ content：“”； display：block； clear：both； } 推薦使用，目前主流方法 1.新增浮動元素的不浮動兄弟標籤，並設定clear屬性，屬性值一般直接給both 2.浮動元素的父級元素設定overflow屬性，屬性值為hidden，擴充套件性較差 3.浮動元素的父級設定高度，實際上沒有清浮動的效果，只產生感官上的效果,擴充套件性更差 4.給父級元素新增偽類子元素，偽類子元素用於清除浮動，清除後，浮動元素的大小撐開父級的高度。 .div:after{ content:"" display:block; clear:both; } clear{ zoom：1； } （因為只有IE8+以上的瀏覽器才支援） 相當於最後給一個空<div style:"cllear:both;"></div> 內外邊距以及margin的坑： 1.margin 外邊距 分為上下左右四個方位，用於設定元素之間的間距 2.margin注意事項 1⃣當相鄰元素的margin-right和margin-left發生重疊的時候，間距疊加 2⃣當相鄰元素的上下margin發生重疊的時候，間距取大值 3.margin和padding的數值表示 一個值時，表示上右下左， 兩個值時，一值表示上下，二值表示右左 三個值時，一值表示上，二值表示右左，三值表示下 四個值時，上右下左，從top開始順時針方向 4.transparent 透明色 5.margin的小性子：當父子級衝突，且長寬一樣時，顯示子級 1⃣第一個子級的margin-top會在特定的情況下穿透父級，不顯示父級，只顯示margin； 2⃣兄弟關係的margin-top和margin-bottom會疊加，誰大算誰的 解決辦法： 1.父級設定border，如若不想顯現，可以把顏色設定成透明色transparent 2.父級設定padding-top 3.父級設定overflow：hidden（溢位隱藏） overflow的基本用法 1.子級溢位的部分隱藏掉 2.可以解決margin-top的坑 4.給父元素或者子元素宣告浮動float 5.使父元素或子元素宣告為絕對定位：position:absolute; 6.給父元素新增屬性 overflow:auto; positon:relative；