浮動float

讓元素按照指定的方向移動（只可以左右），知道容器的邊界padding，或者其他浮動邊界margin，才會停下

float:left 向左浮動

float：right 向右浮動

float：none 不使用浮動

一般布局可以避開浮動就避開
同一行沒有做夠的空間，在下面位置浮動，大的容器在同一行進行排序

文本環(huán)繞，設(shè)置圖片浮動，周圍文字進行環(huán)繞 （不會脫離文本流）

任意標簽都可以設(shè)置浮動→ 浮動元素? （塊元素可以在同一行，行內(nèi)元素可以設(shè)置寬高、盒子模型）浮動會使元素脫離文檔流，表現(xiàn)不被元素原先的display限制

脫離文檔流：也就是將元素從普通的布局排版中拿走，其他盒子在定位的時候會當做脫離文檔流不存在進行定位

脫離文檔流也會導(dǎo)致以下問題：

1，浮動元素不能撐開容器的高度 （已經(jīng)脫離的元素，不在普通文檔流中當然撐不開）“高度塌陷”

沒有設(shè)置浮動的時候

設(shè)置浮動后

2,，浮動元素會產(chǎn)生層疊，懸停在普通文檔流上? （*** 一般不會用浮動來堆疊元素）

沒有添加浮動之前兩個相鄰塊元素

添加浮動后的疊加問題

3，會對后續(xù)元素產(chǎn)生影響

添加浮動會對后續(xù)布局產(chǎn)生影響

總的來說，既然已經(jīng)脫離了普通文檔流，就不再參與常規(guī)的布局排版，浮到布局的上層，包裹它的元素和后續(xù)的元素都會產(chǎn)生影響

元素設(shè)置了float屬性后，會影響其相鄰的元素，相鄰的元素如果想要不被影響需要對其進行清除浮動

浮動元素清除浮動只是清除他上一個元素給他帶來的影響，他自身還是浮動元素，清除浮動還是脫離文檔流，

清除浮動：

1，父級元素設(shè)置height，只適合高度固定的布局

2，給浮動元素的容器添加overflow：hidden （浮動的元素的高度會被算進去 ， 不太靈活）-

zoom：1; (解決IE 6 7 的兼容問題)

3，在浮動元素后使用一個空元素 <div class="clear">? </div>??????? .clear{clear:both}

設(shè)置在塊元素上，出現(xiàn)在浮動元素后面，自己不可以有浮動

clear：left? 不允許元素的左側(cè)出現(xiàn)浮動元素

???????? right? 不允許元素的右側(cè)出現(xiàn)浮動元素

???????? both? 不允許元素的左側(cè)和右側(cè)出現(xiàn)浮動元素

4添加CSS的::afte偽元素 出現(xiàn)在包裹元素的最后面

?.clearfix::after{

????????????? content:" "；?? 必須要寫， 內(nèi)容為空

????????????? display：block； 偽元素默認為行內(nèi)元素，需要轉(zhuǎn)換為塊元素執(zhí)行 clear:both

????????????? clear：both ；? 清除浮動，需要設(shè)置在塊元素上

???????????? /*? height:0 ； ?? 高度為0

???????????????? visibility:hidden ； 顯示：隱藏

????????????? */?? 解決兼容問題

}

.clear{zoom:1；}?? (解決IE 6 7 的兼容問題)

偽元素：通過在css設(shè)置，在頁面中表現(xiàn)為? 內(nèi)聯(lián)元素 最重要的屬性 content：內(nèi)容 （文本，圖片）

a:: after( || before){??????????????? before:在元素之前插入內(nèi)容

??? content:....?????????????????????? after： 在元素之后插入內(nèi)容 容器的最后

}

偽元素