|
當(dāng)面試官問(wèn)道你高度塌陷時(shí)，人們第一想到的方法一定是 .clearfix::after {
content: '';
display: block;
clear: both;
visibility: hidden;
height: 0;
}
對(duì)，沒(méi)錯(cuò)，這是一個(gè)完美的解決方案，但是我們有考慮過(guò)這個(gè)方案的實(shí)現(xiàn)原理嗎，或者面試管繼續(xù)問(wèn)你這個(gè)方法的原理是什么？是不是一臉懵，不懵的也別杠，接下來(lái)我通過(guò)排他法來(lái)展示他的原理 1. 首先 ::after 是元素的偽元素，在元素后面生成偽元素 2.content 是偽元素的內(nèi)容，為空，只是讓偽元素不顯示，顯然不是原理 3. height:0 是為了讓偽元素高度為0 ，顯然不是 4. visibility:hidden 是為了偽元素瀏覽器渲染但不顯示，顯然也不是 5. display: block 只是為了讓偽元素成為塊級(jí)元素，成為觸發(fā) clear:both 的條件，有點(diǎn)關(guān)系 6. clear:both 規(guī)定在左右兩側(cè)不允許出現(xiàn)浮動(dòng)元素， 這便是清除浮動(dòng)的原理了
那么為什么要清除浮動(dòng)，最常見(jiàn)的原因是 外層容器高度塌陷，下面簡(jiǎn)單演示一下 <style>
.wrap {
width: 200px;
border: 1px solid #333;
}
.wrap:after {
content: '偽元素';
}
.left {
float: left;
background: blue;
height: 100px;
width: 100px;
}
.right {
float: left;
background: red;
height: 50px;
width: 100px;
}
</style>
<body>
<div class="wrap">
<div class="left"></div>
<div class="right"></div>
</div>
<div style="background: #000; width: 200px;">ccc</div>
</body>
這便是高度塌陷的情況，按理解來(lái)說(shuō)，黑色的div 應(yīng)該存在于 .weap 下面，這就輪到 clear:both 出場(chǎng)了 <style>
.wrap {
width: 200px;
border: 1px solid #333;
}
.wrap:after {
content: '';
display: block;
clear: both;
}
.left {
float: left;
background: blue;
height: 100px;
width: 100px;
}
.right {
float: left;
background: red;
height: 50px;
width: 100px;
}
</style>
<body>
<div class="wrap">
<div class="left"></div>
<div class="right"></div>
</div>
<div style="background: #000; width: 200px;">ccc</div>
</body>
現(xiàn)在高度塌陷問(wèn)題就解決了
接下來(lái)咱們聊聊 BFC， 觸發(fā)BFC 也能解決高度塌陷等問(wèn)題，咱們先來(lái)了解 BFC的概念及其規(guī)則 1. 概念BFC的全稱是 Block Formatting Contexts。 Formatting Contexts是頁(yè)面中的一塊渲染區(qū)域，它擁有一套渲染規(guī)則，決定其子元素將如何定位，以及和其它元素的關(guān)系 和相互作用。說(shuō)白了就是一個(gè)決定如何渲染元素的容器。 2. BFC 的渲染規(guī)則①： 內(nèi)部的塊級(jí)元素會(huì)在垂直方向，一個(gè)接一個(gè)地放置 ②： 塊級(jí)元素垂直方向的距離由margin 決定。屬于同一個(gè)BFC的相鄰元素的margin 會(huì)重疊 3： 對(duì)于從左往右的格式化，每個(gè)元素（塊級(jí)元素與行內(nèi)元素）的左邊緣，與包含塊的左邊緣相接觸，(對(duì)于從右往左的格式化則相反)。即使包含塊中的元素存在浮動(dòng)也是如此，除非其中元素再生成一個(gè)BFC ?、埽?nbsp;BFC的區(qū)域不會(huì)與浮動(dòng)元素重疊。 五：BFC是一個(gè)隔離的獨(dú)立容器，容器里面的子元素和外面的元素互不影響 ⑥： 計(jì)算BFC容器的高度時(shí)，浮動(dòng)元素也參與計(jì)算。 3. 觸發(fā) BFC 條件根元素 float的值不是none。 position的值不是static或者relative。 display的值是inline-block、inline-flex、flex、flow-root、table-caption、table-cell。 overflow的值不是visible。 4. BCF 應(yīng)用4.1 規(guī)則二以上渲染規(guī)則，第一點(diǎn)很好理解，第二點(diǎn)我們用一盒例子來(lái)解釋 <body>
<div style="width:100px;height:100px;background:red;margin:20px;"></div>
<div style="width:100px;height:100px;background:blue;margin:20px;"></div>
</body>
按樣式代碼來(lái)看，紅塊和藍(lán)塊之間間距應(yīng)該是40px。但實(shí)際上是20px。這就是BFC渲染規(guī)則的第二點(diǎn)。
因?yàn)锽FC的觸發(fā)條件之一就是根元素，所以 我們利用BFC渲染規(guī)則第2點(diǎn)（屬于同一個(gè)BFC的兩個(gè)相鄰塊級(jí)元素的margin會(huì)發(fā)生重疊），那么不屬于同一個(gè)BFC的兩個(gè)相鄰塊級(jí)元素的margin就不會(huì)發(fā)生重疊。 那么我們?cè)诘诙€(gè)div元素用一個(gè)div元素包裹起來(lái)，并用 <body>
<div style="width:100px;height:100px;background:red;margin:20px;"></div>
<div style="overflow:auto">
<div style="width:100px;height:100px;background:blue;margin:20px;"></div>
</div>
</body>
4.2 實(shí)現(xiàn)自適應(yīng)兩欄布局自適應(yīng)兩欄布局，是一個(gè)主內(nèi)容區(qū)域和一個(gè)側(cè)邊欄區(qū)域組成，兩個(gè)區(qū)域的寬度都可以隨窗口大小自適應(yīng)。有很多種寫(xiě)法可以實(shí)現(xiàn),我們這里使用BFC 實(shí)現(xiàn)<style>
.main{
background: red;
height:500px;
}
.sider {
float: left;
width: 20%;
height:300px;
background: blue;
}
</stley>
<body>
<div class="sider">我是側(cè)邊欄</div>
<div class="main">我是主體內(nèi)容</div>
<body>
首先我們根據(jù)規(guī)則1，要先把 再根據(jù)規(guī)則4（BFC的區(qū)域不會(huì)與浮動(dòng)元素重疊），給 
|
|
|
來(lái)自： 新進(jìn)小設(shè)計(jì) > 《待分類》
