浮動

浮動屬性 float:

? none 不浮動 默認值?在默認文檔流里面

? left 向左浮動

? right 向右浮動

浮動的規(guī)則

??1.浮動的元素會半脫離文檔流，不占據(jù)頁面空間，不會遮擋下面的文字圖文環(huán)繞效果

??2.浮動的元素會在父元素限制的范圍內(nèi)部浮動

??3.浮動的元素會在當前 行框 內(nèi)部浮動

浮動的問題--高度塌陷

??當父元素的高度靠子元素撐開的時候，子元素全部浮動，導致父元素沒有高度

??此刻父元素高度塌陷，后果是浮動布局失敗

?解決浮動的問題--清除浮動

??給父元素添加高度 --不推薦 違背了高度自適應(yīng)

??給父元素添加overflow: hidden;?--觸發(fā)了BFC

.father {?width: 800px;

???/* 不寫高度 */

???border: 10px solid #000;

???/* 解決1 */

???/* height: 200px; */

???/* 解決2 */

???overflow: hidden;?}

??.son {width: 200px;height: 200px;border: 5px solid red;

???/* 設(shè)置浮動 */

???float: left;}

浮動的問題--元素類型

??行內(nèi)元素添加浮動屬性之后可以直接設(shè)置寬高

??原因:元素添加浮動之后脫離了默認文檔流，不再遵從默認文檔流的元素類型

??直接原因:元素添加浮動屬性之后會產(chǎn)生一個行框

標準盒子模型:

css規(guī)定,所有元素都是框,所有元素在頁面上都占據(jù)了空間

??盒子模型:計算空間(元素實際占地大小)的公式

盒子模型的組成部分：

?? content 內(nèi)容(width+height)；padding?內(nèi)邊距；border 邊框（邊框會撐大盒子）；margin 外邊距

padding(內(nèi)邊距)的特征 padding-方位詞(top/right/bottom/left):值；

??1.位于內(nèi)容content和邊框border之間

??2.padding是加給父元素/盒子的，調(diào)整子元素/內(nèi)容的位置

??3.會撐大盒子

??4.背景色會覆蓋到padding區(qū)域

??5.不支持負值

6.行內(nèi)元素設(shè)置上下的內(nèi)邊距無效

?margin的特征 margin-方位詞(top/right/bottom/left):值;

??1.位于邊框border之外

??2.margin是添加給元素自身的，調(diào)整元素自身的位置或者元素與元素之間的位置

??3.不會撐大盒子

??4.沒有顏色

??5.支持負值

外邊距溢出問題:父元素里面的第一個子元素添加margin-top,會把父元素帶下來

??原因:父元素和子元素共用了margin-top

??解決: 給父元素添加1px的padding-top或者border-top(不推薦)

??? 給父元素添加overflow:hidden(觸發(fā)了BFC)

?屬性：overflow:決定溢出容器的部分如何顯示

屬性值:overflow屬性要加給容器的

? visible 默認值 顯示

?? hidden 隱藏

? scroll 強制出現(xiàn)滾動條

? auto 根據(jù)內(nèi)容判斷是否出現(xiàn)滾動條

???