盒子模型、BFC镣陕、浮動
- 盒子模型box model谴餐。
- 盒子屬性
- 標(biāo)準(zhǔn)盒模型、IE盒模型的區(qū)別
- CSS如何設(shè)置這兩種模型
- JS如何設(shè)置呆抑、獲取盒模型對應(yīng)的寬和高
- 根據(jù)盒模型解釋邊距重疊岂嗓。
- BFC（邊距重疊解決方案）或IFC。
- 浮動
- 浮動的性質(zhì)
- 浮動的清除
- 瀏覽器的兼容性問題
- 浮動中margin相關(guān)
- 關(guān)于margin的IE6兼容問題
盒子模型box model
無論是div鹊碍、span厌殉、還是a都是盒子。侈咕，圖片公罕、表單元素一律看作是文本，它們并不是盒子耀销。比如說楼眷，一張圖片里并不能放東西，它自己就是自己的內(nèi)容熊尉。
盒子屬性
- width和height：內(nèi)容的寬度罐柳、高度（不是盒子的寬度、高度）狰住。
- padding：內(nèi)邊距张吉。
- border：邊框。
- margin：外邊距催植。
<body>標(biāo)簽?zāi)J(rèn)有8像素 margin
標(biāo)準(zhǔn)盒子模型：
IE盒子模型：
標(biāo)準(zhǔn)盒模型和IE盒模型的區(qū)別：
在 標(biāo)準(zhǔn)盒子模型中肮蛹，width 和 height 指的是內(nèi)容區(qū)域的寬度和高度。增加內(nèi)邊距创南、邊框和外邊距不會影響內(nèi)容區(qū)域的尺寸伦忠，但是會增加元素框的總尺寸。
IE盒子模型中稿辙，width 和 height 指的是內(nèi)容區(qū)域+border+padding的寬度和高度缓苛。
CSS如何設(shè)置這兩種模型
代碼如下：
/* 設(shè)置當(dāng)前盒子為 標(biāo)準(zhǔn)盒模型（默認(rèn)） */
box-sizing: content-box;
/* 設(shè)置當(dāng)前盒子為 IE盒模型 */
box-sizing: border-box;
備注：盒子默認(rèn)為標(biāo)準(zhǔn)盒模型。
JS如何設(shè)置、獲取盒模型對應(yīng)的寬和高
方式一：通過DOM節(jié)點(diǎn)的 style 樣式獲取
element.style.width/height;
缺點(diǎn)：通過這種方式未桥，只能獲取行內(nèi)樣式笔刹，不能獲取內(nèi)嵌的樣式和外鏈的樣式。這種方式有局限性冬耿，但應(yīng)該了解舌菜。
方式二（通用型）
window.getComputedStyle(element).width/height;
方式二能兼容 Chrome、火狐亦镶。是通用型方式日月。
方式三（IE獨(dú)有的）
element.currentStyle.width/height;
和方式二相同，但這種方式只有IE獨(dú)有缤骨。獲取到的即時(shí)運(yùn)行完之后的寬高（三種css樣式都可以獲劝А）。
方式四
element.getBoundingClientRect().width/height;
此 api 的作用是：獲取一個(gè)元素的絕對位置绊起。絕對位置是視窗 viewport 左上角的絕對位置精拟。
此 api 可以拿到四個(gè)屬性：left、top虱歪、width蜂绎、height。
總結(jié)：
上面的四種方式笋鄙，要求能說出來區(qū)別师枣，以及哪個(gè)的通用型更強(qiáng)。
margin塌陷/margin重疊
標(biāo)準(zhǔn)文檔流中萧落，水平方向margin疊加践美，豎直方向的margin不疊加，只取較大的值作為margin
如果不在標(biāo)準(zhǔn)流找岖，比如盒子都浮動了拨脉，那么兩個(gè)盒子之間是沒有margin重疊的現(xiàn)象的。
在標(biāo)準(zhǔn)流中父子結(jié)構(gòu)和兄弟結(jié)構(gòu)都存在margin塌陷/重疊問題宣增，舉個(gè)例子，講父子之間的margin重疊矛缨。
<div>
<p></p>
</div>
上面的結(jié)構(gòu)中爹脾，我們嘗試通過給兒子p一個(gè)margin-top:50px;的屬性，讓其與父親保持50px的上邊距箕昭。結(jié)果卻看到了一個(gè)奇怪的現(xiàn)象灵妨，子元素P帶著父元素一起下降了50px：
此時(shí)我們給父親div加一個(gè)border屬性，就正常了：
** 如果父親沒有border落竹，那么兒子的margin實(shí)際上踹的是“流”泌霍，踹的是這“行”。所以，父親整體也掉下來了朱转。**
margin這個(gè)屬性蟹地，本質(zhì)上描述的是兄弟和兄弟之間的距離； 最好不要用這個(gè)marign表達(dá)父子之間的距離藤为。所以怪与，如果要表達(dá)父子之間的距離，我們一定要善于使用父親的padding缅疟，而不是兒子的margin分别。
BFC（邊距重疊解決方案）
BFC的概念：塊級格式化上下文。
BFC 的原理/BFC的布局規(guī)則【非常重要】
BFC 的原理存淫，其實(shí)也就是 BFC 的渲染規(guī)則：
- （1）BFC 內(nèi)部的子元素耘斩，在垂直方向，邊距會發(fā)生重疊桅咆。
- （2）BFC在頁面中是獨(dú)立的容器括授，外面的元素不會影響里面的元素，反之亦然轧邪。（稍后看
舉例1） - （3）BFC區(qū)域不與旁邊的
float box區(qū)域重疊刽脖。（可以用來清除浮動帶來的影響）。（稍后看舉例2） - （4）計(jì)算BFC的高度時(shí)忌愚，浮動的子元素也參與計(jì)算曲管。（稍后看
舉例3）
如何生成BFC
有以下幾種方法：
- 方法1：overflow: 不為vidible，可以讓屬性是 hidden硕糊、auto院水。【最常用】
- 方法2：浮動中：float的屬性值不為none简十。意思是檬某，只要設(shè)置了浮動，當(dāng)前元素就創(chuàng)建了BFC螟蝙。
- 方法3：定位中：只要posiiton的值不是 static或者是relative即可恢恼，可以是
absolute或fixed，也就生成了一個(gè)BFC胰默。 - 方法4：display為inline-block, table-cell, table-caption, flex, inline-flex
參考鏈接：
BFC 的應(yīng)用
舉例1：解決 margin 重疊overflow: hidden
當(dāng)父元素和子元素發(fā)生 margin 重疊時(shí)场斑，解決辦法：給子元素或父元素創(chuàng)建BFC。子元素設(shè)置overflow: hidden就創(chuàng)建一個(gè) BFC牵署，就解決了：
<div class="father">
<p class="son" style="overflow: hidden">
</p>
</div>
因?yàn)?strong>第二條：BFC區(qū)域是一個(gè)獨(dú)立的區(qū)域漏隐，不會影響外面的元素。
舉例2：BFC區(qū)域不與float區(qū)域重疊：
針對下面這樣一個(gè)div結(jié)構(gòu)奴迅；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.father-layout {
background: pink;
}
.father-layout .left {
float: left;
width: 100px;
height: 100px;
background: green;
}
.father-layout .right {
height: 150px; /*右側(cè)標(biāo)準(zhǔn)流里的元素青责，比左側(cè)浮動的元素要高*/
background: red;
}
</style>
</head>
<body>
<section class="father-layout">
<div class="left">
左側(cè)，生命壹號
</div>
<div class="right">
右側(cè)，smyhvae脖隶，smyhvae扁耐，smyhvae，smyhvae浩村，smyhvae做葵，smyhvae，smyhvae心墅，smyhvae酿矢，smyhvae，smyhvae怎燥，smyhvae瘫筐，smyhvae，
</div>
</section>
</body>
</html>
效果如下：
上圖中铐姚，由于右側(cè)標(biāo)準(zhǔn)流里的元素策肝，比左側(cè)浮動的元素要高，導(dǎo)致右側(cè)有一部分會跑到左邊的下面去隐绵。
如果要解決這個(gè)問題之众，可以將右側(cè)的元素創(chuàng)建BFC，因?yàn)?strong>第三條：BFC區(qū)域不與float box區(qū)域重疊依许。解決辦法如下：（將right區(qū)域添加overflow屬性）
<div class="right" style="overflow: hidden">
右側(cè)棺禾，smyhvae，smyhvae峭跳，smyhvae膘婶，smyhvae，smyhvae蛀醉，smyhvae悬襟，smyhvae，smyhvae拯刁，smyhvae脊岳，smyhvae，smyhvae垛玻，smyhvae割捅，
</div>
上圖表明，解決之后夭谤，father-layout的背景色顯現(xiàn)出來了，說明問題解決了巫糙。
舉例3：清除浮動
現(xiàn)在有下面這樣的結(jié)構(gòu)：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.father {
background: pink;
}
.son {
float: left;
background: green;
}
</style>
</head>
<body>
<section class="father">
<div class="son">
生命壹號
</div>
</section>
</body>
</html>
效果如下：
上面的代碼中朗儒，兒子浮動了，但由于父親沒有設(shè)置高度，導(dǎo)致看不到父親的背景色（此時(shí)父親的高度為0）醉锄。正所謂有高度的盒子乏悄，才能關(guān)住浮動。
如果想要清除浮動帶來的影響恳不，方法一是給父親設(shè)置高度檩小，然后采用隔墻法。方法二是 BFC：給父親增加 overflow=hidden屬性即可烟勋， 增加之后规求，效果如下：
為什么父元素成為BFC之后，就有了高度呢卵惦？這就回到了第四條：計(jì)算BFC的高度時(shí)阻肿，浮動元素也參與計(jì)算。意思是沮尿，在計(jì)算BFC的高度時(shí)丛塌，子元素的float box也會參與計(jì)算。
清除浮動
1畜疾、加高法：給前面一個(gè)父級元素設(shè)置高度
** 工作上赴邻，我們絕對不會給所有的盒子加高度，這是因?yàn)槁闊┓却罚⑶也荒苓m應(yīng)頁面的快速變化姥敛。**
2、clear:both;法:給后面的盒子添加clear屬性
最簡單的清除浮動的方法届慈，就是給盒子增加clear:both徒溪；表示自己的內(nèi)部元素，不受其他盒子的影響金顿。
** 這個(gè)方法浮動確實(shí)被清除了臊泌，不會互相影響了。但是有一個(gè)問題揍拆，就是margin失效渠概。兩個(gè)div之間，沒有任何的間隙了嫂拴。**
3播揪、隔墻法：
在兩部分浮動元素中間，建一個(gè)墻筒狠。隔開兩部分浮動猪狈，讓后面的浮動元素，不去追前面的浮動元素辩恼。
外墻法：
內(nèi)墻法：
4雇庙、overflow:hidden;
這個(gè)屬性的本意谓形，就是將所有溢出盒子的內(nèi)容，隱藏掉疆前。但是寒跳，我們發(fā)現(xiàn)這個(gè)東西能夠用于浮動的清除。
我們知道竹椒，一個(gè)父親童太，不能被自己浮動的兒子撐出高度，但是胸完，如果這個(gè)父親加上了overflow:hidden书释；那么這個(gè)父親就能夠被浮動的兒子撐出高度了。這個(gè)現(xiàn)象舶吗，不能解釋征冷，就是瀏覽器的偏方。
并且,overflow:hidden;能夠讓margin生效誓琼。
5.偽類清除浮動:.clearfix清除浮動寫在父級元素身上
.clearfix::after {
content: '';
display: block;
clear: both;
}
/* 兼容 IE */
.clearfix {
zoom: 1;
}
