浮動布局：
實現(xiàn)：
方式一：display:inline-block
弊端：存在代碼換行被解析
方式二：float:left
優(yōu)點：避免代碼換行被解析
可左右浮動
浮動的特性：
1.浮動的元素排在同一行
2.浮動的元素內(nèi)容撐開寬度
3.浮動的元素支持所有的css樣式
4.浮動的元素脫離文檔流
5.浮動的元素提升層級半級
Tips:脫離文檔流后的元素會脫離原來的父級的布局，導(dǎo)致父級無法使用子級來撐開寬高揉阎。
處理方式:清理浮動的操作（BFC）
overflow:hidden(溢出避免)
針對浮動的元素脫離文檔流庄撮，接下來我們學(xué)習(xí)上面引入的BFC概念來處理該特性：
overflow 溢出
hidden 溢出部分隱藏
auto 溢出自動出現(xiàn)滾動條
scroll 始終出現(xiàn)滾動條
元素的居中（區(qū)別與文本居中）
margin:0 auto;(外邊距上下設(shè)置為0邊距，左右設(shè)置自動外邊距毙籽，生效后即為居中)
元素的偽類
:hover (鼠標(biāo)懸停)
:after (在元素內(nèi)容之后插入一些內(nèi)容)
浮動：其實就是使元素脫離文檔流洞斯，按照一定的方式排列，遇到相鄰的浮動元素或者父級的邊界停下來坑赡。
BFC (清理浮動烙如，處理浮動元素會脫離文檔流的特性)
1.父級也浮動；
弊端：左右的margin:0 auto; 會失效
層級復(fù)雜時毅否，不好控制布局亚铁；
2.父級加上display:inline-block;
弊端：左右的margin:0 auto; 會失效
（如果需要讓元素居中可以給父級加text-align:center）
3.給父級加高度
弊端：失去了隨機擴展性
4.<br>標(biāo)簽
作用：換行
寫法：<br clear="all">
弊端：不符合w3c的規(guī)范：結(jié)構(gòu)行為樣式三者分離，不推薦
5.clear
規(guī)定元素的哪一側(cè)不允許其他浮動元素螟加。
left 在左側(cè)不允許浮動元素徘溢。
right 在右側(cè)不允許浮動元素。
both 在左右兩側(cè)均不允許浮動元素捆探。(常用)
弊端：不符合w3c的規(guī)范：結(jié)構(gòu)行為樣式三者分離然爆，不推薦
6.偽類清浮動（目前主流方法，推薦使用）
.clear:after {
content: "";
display: block;(必須設(shè)置偽類為塊級顯示標(biāo)簽黍图，支持css樣式曾雕，才能使BFC生效)
clear: both;
}
需要給那個元素清浮動，就把哪個元素的class設(shè)置為clear
針對浮動的元素提升層級半級助被，我們可以利用該特性剖张，實現(xiàn)類型文字環(huán)繞圖片的效果。
