CSS + CSS3

1.左右布局:不少于三種方法

圣杯布局和雙飛翼布局解決的問(wèn)題是一樣的,就是兩邊頂寬,中間自適應(yīng)的三欄布局,中間欄要在放在文檔流前面以優(yōu)先渲染。

圣杯布局和雙飛翼布局解決問(wèn)題的方案在前一半是相同的,也就是三欄全部float浮動(dòng),但左右兩欄加上負(fù)margin讓其跟中間欄div并排,以形成三欄布局。

不同在于解決”中間欄div內(nèi)容不被遮擋“問(wèn)題的思路不一樣:

圣杯布局,為了中間div內(nèi)容不被遮擋,將中間div設(shè)置了左右padding-left和padding-right后,將左右兩個(gè)div用相對(duì)布局position: relative并分別配合right和left屬性,以便左右兩欄div移動(dòng)后不遮擋中間div。

雙飛翼布局,為了中間div內(nèi)容不被遮擋,直接在中間div內(nèi)部創(chuàng)建子div用于放置內(nèi)容,在該子div里用margin-left和margin-right為左右兩欄div留出位置。

作者:知乎用戶
鏈接:https://www.zhihu.com/question/21504052/answer/50053054
來(lái)源:知乎
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請(qǐng)聯(lián)系作者獲得授權(quán),非商業(yè)轉(zhuǎn)載請(qǐng)注明出處。

  • 圣杯模型

兩欄和自適應(yīng)元素都設(shè)置同一方向的浮動(dòng)(如float: left)

父元素設(shè)置左右padding為左右邊欄的寬度。

自適應(yīng)元素設(shè)置寬度為100%

左邊欄margin-left為負(fù)100%,再設(shè)置relative,最后通過(guò)left屬性偏移負(fù)的自身寬度。

右邊欄margin-left為負(fù)自身寬度,再設(shè)置relative,最后通過(guò)right屬性偏移負(fù)的自身寬度。

  • 雙飛翼模式
    與圣杯模式相似,只不過(guò)少了relative,left,right的步驟和共同父元素,主內(nèi)容元素多了層父元素,實(shí)現(xiàn)思路如下:

main元素設(shè)置左右margin值,值為左右兩欄的寬度,main父元素設(shè)置寬度為100%。
左邊欄margin-left為負(fù)100%
右邊欄margin-left為負(fù)自身寬度

  • 兩欄布局
    利用BFC布局實(shí)現(xiàn):
html:
<div class="main">
        <div class="left"></div>
        <div class="right">可愛(ài)如我可愛(ài)如我可愛(ài)如我可愛(ài)如我   biubiubiubiubiubiu</div>
</div>

css:
        .main{
            /* float: left; */
            width: 100%;
        }
        .left{
            float: left;
            width: 100px;
            height: 100px;
            background-color: orange;
            opacity: 0.5;
        }
        .right{
            overflow: auto;
            height: 100px;
            background-color: green;
        }
main里注釋的那句代碼是因?yàn)榧雍筒患訉?duì)這個(gè)布局沒(méi)影響,加的話如果后面還有元素,可能需要視情況考慮清除浮動(dòng)。

該布局利用了float和overflow,overflow在這里的作用是激活BFC布局。

除了BFC,還可以利用float和margin來(lái)實(shí)現(xiàn),和上面BFC相比,只是少了一句BFC的激活語(yǔ)句,多了一句 margin-left:100px;

2.BFC的功能和特點(diǎn):

  • 如何激活BFC布局:
1.float值不是none
2.position為absolute或者fixed
3.非塊級(jí)元素的display是其中一個(gè):inline-block,table-cell,table-caption,flex,inline-flex
4.塊級(jí)元素具有overflow,且值不是visible
html:
<div class="wrap">
<section>1</section>
<section>2</section>
</div>

css:
.wrap {
  border: 2px solid yellow;
  width: 250px;
}
section {
  background-color: pink;
  float: left;
  width: 100px;
  height: 100px;
}

由于子元素都是浮動(dòng)的,受浮動(dòng)影響,邊框?yàn)辄S色的父元素的高度坍塌了。


image

解決方案:為.wrapper 加上 overflow:hidden,使其形成BFC,根據(jù)BFC規(guī)則第六條,計(jì)算高度時(shí)就會(huì)計(jì)算float的元素的高度,達(dá)到清除浮動(dòng)的效果。
清除后如下:


image

清除浮動(dòng)原理:觸發(fā)父div的BFC屬性,使下面的子div都處在父div的同一個(gè)BFC區(qū)域之內(nèi),此時(shí)已成功清除浮動(dòng)。
2.自適應(yīng)兩欄布局

見(jiàn)CSS + CSS3的問(wèn)題1 有詳細(xì)解釋

3.防止垂直margin合并
html:
<section class="top">1</section>
<section class="bottom">2</section>

css:
section {
  background-color: pink;
  margin-bottom: 100px;
  width: 100px;
  height: 100px;
}
.bottom {
  margin-top: 100px;
}
請(qǐng)注意,這里有一個(gè)margin-bottom和margin-top分別都是100px,section的寬高為了好對(duì)比也設(shè)置的100px
image

可以看到,我們實(shí)際只能看到兩個(gè)section之間的高度是100px,這是因?yàn)樗麄兊耐膺吘嘞嘤霭l(fā)生了合并。
解決方式:為其中一個(gè)元素的外面包裹一層元素,并為這個(gè)外層元素設(shè)置overflow:hidden,使其形成BFC。因?yàn)锽FC內(nèi)部是一個(gè)獨(dú)立的容器,所以不會(huì)與外部相互影響,可以防止margin合并。

代碼如下:
html:
<section class="top">1</section>
<div class="wrap">
<section class="bottom">2</section>
</div>
css多加了.wrap的樣式,其他不變。
overflow:hidden
image

3.對(duì)柵格的理解

大部分柵格系統(tǒng)的公式依據(jù):W =(c + g) * N
其中W是Flowline是W,c是column的寬度,g是Gutter(卡槽)的寬度

bootsrap的柵格系統(tǒng):

bootstrap中,必須將列放入row中,而row必須在container中,container類在布局中主要有兩個(gè)作用:
1.在不同的寬度區(qū)間內(nèi)(響應(yīng)式斷點(diǎn))提供寬度限制,當(dāng)寬度變化時(shí),采用不同的寬度。
2.提供一個(gè)padding,組織內(nèi)部?jī)?nèi)容觸碰到瀏覽器邊界。

響應(yīng)式布局概念:為同一個(gè)頁(yè)面設(shè)計(jì)多種布局形態(tài),分別適配不同屏幕尺寸的設(shè)備。

在介紹柵格布局如何實(shí)現(xiàn)之前,先介紹一個(gè)bootstrap中的柵格原理:
參考源文
要理解bootstrap的柵格,這其中有兩個(gè)要點(diǎn):

  • 容器(container),行(row)和列(column)之間的層級(jí)關(guān)系,一個(gè)正確的寫(xiě)法如下:
<div class="container">  
    <div class="row">  
        <div class="col-md-6"></div>  
        <div class="col-md-6"></div>  
    </div>  
</div>

bootstrap柵格的container,row,column必須保持特定的層級(jí)關(guān)系,才能正常工作。原因如下:container有15px的水平內(nèi)邊距,row有-15px的水平外邊距,column有15px的水平內(nèi)邊距,這些邊距是故意的、互相關(guān)聯(lián)的,因此就像齒輪一樣,限定了層級(jí)結(jié)構(gòu)。這也是bootstrap的精巧之處。
正確的用法如下:

<div class="container">   
    <div class="row">   
        <div class="col-md-8">   
            <div class="row">   
                <div class="col-md-6"></div>   
                <div class="col-md-6"></div>   
            </div>   
        </div>   
        <div class="col-md-4"></div>   
    </div>   
</div>
  • 第二個(gè)要點(diǎn),是不同的斷點(diǎn)類型的意義及其搭配

bootstrap柵格的column對(duì)應(yīng)的類名形如.col-xx-y,其中y是數(shù)字,表示該元素的寬度占據(jù)12列中的y列,而xx只有特定的幾個(gè)值可以選擇,分別是xs、sm、md、lg,他們就是斷點(diǎn)類型,斷點(diǎn)像素值依次增大,其中xs表示極小,即認(rèn)為視口寬度永遠(yuǎn)不小于xs斷點(diǎn),column始終水平浮動(dòng)。
在bootstrap的sass源碼中是這樣定義柵格的:

@include make-grid-columns;   
@include make-grid(xs);   
@media (min-width: $screen-sm-min) {   
  @include make-grid(sm);   
}   
@media (min-width: $screen-md-min) {   
  @include make-grid(md);   
}   
@media (min-width: $screen-lg-min) {   
  @include make-grid(lg);   
}

可以看到,用了min-width的寫(xiě)法,而且斷點(diǎn)像素值越大的,對(duì)應(yīng)代碼越靠后。這就是為什么在實(shí)現(xiàn)柵格布局時(shí),只設(shè)定最小值,而不設(shè)定最大值的原因了。

現(xiàn)在我們可以來(lái)了解一下如何實(shí)現(xiàn)柵格布局了:

柵格布局如何實(shí)現(xiàn):

參照源

  • 開(kāi)始

實(shí)現(xiàn)柵格系統(tǒng),首要確定兩個(gè)內(nèi)容:
1.我們打算把屏幕分為幾類
2.我們打算支持的列數(shù)是多少
我們可以以bootstrap為參照,將屏幕分成四類:超小屏幕(<768px),小屏幕--平板(>=768px),中等屏幕--桌面顯示器(>=992px),大屏幕--大屏幕顯示器(>=1200px),類前綴分別為:.col-xs-,.col-sm-,.col-md-,.col-lg-,列數(shù)也可以定位12。

  • 實(shí)現(xiàn)

確定好屏幕分類和列數(shù)后,就可以開(kāi)始實(shí)現(xiàn)了。
首先給柵格系統(tǒng)的所有class增加浮動(dòng) float:left

聲明浮動(dòng)后開(kāi)始聲明寬度,從最小屏幕開(kāi)始,最小屏幕不需要使用@media來(lái)聲明。

.col-sm-1 {
    width: 8.333333%  // 十二分之一
}
.col-sm-2 {
    width: 16.66667%  // 十二分之二      
}
// ...
.col-sm-12 {
    width: 100%  // 十二分之十二
}

其他情況情況也需要聲明浮動(dòng)和寬度,但是需要聲明最小屏幕寬度,以中屏舉例:

注意括號(hào)里是 min-width
@media (min-width:992) {
    .col-md-1 {
        width: 8.333333%  // 十二分之一
    }
    .col-md-2 {
        width: 16.66667%  // 十二分之二      
    }
    // ...
    .col-md-12 {
        width: 100%  // 十二分之十二
    }
}

其他情況同理,這樣我們就能實(shí)現(xiàn)一個(gè)簡(jiǎn)單的柵格系統(tǒng)。

4.(水平)居中有哪些實(shí)現(xiàn)方式

  • text-align:center;
    將行內(nèi)元素包裹在一個(gè)屬性display為block的父層元素中,并且把父層元素添加如下屬性即可:
  • 塊狀元素解決方案: margin:0 auto;
  • 多個(gè)塊狀元素解決方案
    將元素的display屬性設(shè)置為Inline-block,并且把父元素的text-align屬性設(shè)置為center。
  • 多個(gè)塊狀元素解決方案(使用flexbox布局實(shí)現(xiàn))
    使用flexbox布局,只需要把待處理的塊狀元素的父元素添加屬性display:flex及justify-content:center
垂直居中
  • 單行的行內(nèi)元素解決方案
    height=line-height

  • 多行的行內(nèi)元素解決方案
    組合使用display:table-cell和vertical-align:middle屬性來(lái)定義需要居中的元素的父容器元素生成效果

  • 已知高度的塊元素解決方案
    top移動(dòng)50%,之后margin-top移動(dòng)自身高度的一半

水平垂直居中
  • 已知高度和寬度的元素
.item{
    position:absolute;
    margin:0 auto;
    left:0;
    top:0;
    right:0;
    bottom:0;
}
  • 已知高度和寬度的元素
.item{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -75px;  /* 設(shè)置margin-left / margin-top 為自身高度的一半 */
    margin-left: -75px;
}
  • 未知高度和寬度的元素
.item{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);  /* 使用css3的transform來(lái)實(shí)現(xiàn) */
}
  • 使用flex布局來(lái)實(shí)現(xiàn)
.parent{
    display: flex;
    justify-content:center;
    align-items: center;
    /* 注意這里需要設(shè)置高度來(lái)查看垂直居中效果 */
    background: #AAA;
    height: 300px;
}

5.CSS3有哪些新屬性?

彈性盒子 flex

概念源文
彈性盒子是CSS3的一種新的布局模式,是一種當(dāng)頁(yè)面需要適應(yīng)不同的屏幕大小以及設(shè)備類型時(shí)確保元素?fù)碛星‘?dāng)?shù)男袨榈牟季址绞健?br> 彈性盒子由彈性容器和彈性子元素組成,彈性容器通過(guò)設(shè)置display屬性的值為flex或inline-flex將其定義為彈性容易。
彈性容器內(nèi)包含了一個(gè)或多個(gè)彈性盒子。

  • flex-direction屬性
    1 row:橫向從左到右排列(左對(duì)齊),默認(rèn)的排列方式
    2 row-reverse:反轉(zhuǎn)橫向排列(右對(duì)齊,從后往前排,最后一項(xiàng)排在最前面)
    3 column:縱向排列
    4 column-reverse:反轉(zhuǎn)縱向排列,從后往前排,最后一項(xiàng)排在最上面

  • justify-content屬性
    1 flex-start:默認(rèn)值。彈性項(xiàng)目向行頭緊挨著填充。
    2 flex-end:彈性項(xiàng)目向行尾緊挨著填充
    3 center:彈性項(xiàng)目居中緊挨著填充(如果剩余的自由空間是負(fù)的,則彈性項(xiàng)目將在兩個(gè)方向上同時(shí)溢出)。
    4 space-between:在彈性項(xiàng)目剛好排下的時(shí)候該值等同于flex-start,如果彈性項(xiàng)目少的話,則第一個(gè)彈性項(xiàng)目的外邊距和行的main-start邊線對(duì)齊,而最后一個(gè)彈性項(xiàng)的外邊距和行的main-end邊線對(duì)齊,然后剩余的彈性項(xiàng)分布在該行上,相鄰項(xiàng)目的間隔相等。
    5 space-round:
    如果剩余空間為負(fù)或者只有一個(gè)彈性項(xiàng),則該值等同于center。否則,彈性項(xiàng)目沿該行分布,且彼此間隔相等(比如是20px),同時(shí)首尾兩邊和彈性容器之間留有一半的間隔

  • align-items屬性:設(shè)置盒子元素在側(cè)軸(縱軸)方向上的對(duì)齊方式。
    1 flex-start:彈性盒子元素的側(cè)軸(縱軸)起始位置的邊界緊靠住該行的側(cè)軸起始邊界。
    2 flex-end:彈性盒子元素的側(cè)軸(縱軸)起始位置的邊界緊靠住該行的側(cè)軸結(jié)束邊界。
    3 center:彈性盒子元素在該行的側(cè)軸(縱軸)上居中放置。(如果該行的尺寸小于彈性盒子元素的尺寸,則會(huì)向兩個(gè)方向溢出相同的長(zhǎng)度)。
    4 baseline:如彈性盒子元素的行內(nèi)軸與側(cè)軸為同一條,則該值與'flex-start'等效。其它情況下,該值將參與基線對(duì)齊。
    5 stretch:如果指定側(cè)軸大小的屬性值為'auto',則其值會(huì)使項(xiàng)目的邊距盒的尺寸盡可能接近所在行的尺寸,但同時(shí)會(huì)遵照'min/max-width/height'屬性的限制。

3D旋轉(zhuǎn)

不同瀏覽器的動(dòng)畫(huà)兼容性都不一樣,所以在寫(xiě)旋轉(zhuǎn)屬性時(shí)考慮多種瀏覽器的兼容特點(diǎn)。
比如:同樣的transform,谷歌是-webkit-transform,火狐是-moz-transfrom。

旋轉(zhuǎn)方法如下:

沿X軸旋轉(zhuǎn)
div{
  transform:rotateX(120deg);
  -webkit-transform:rotateX(120deg);
}
沿Y軸旋轉(zhuǎn)
div
{
transform: rotateY(130deg);
-webkit-transform: rotateY(130deg); /* Safari 與 Chrome */
}

另外還可以沿Z軸旋轉(zhuǎn),這里的x,y,z可以聯(lián)想一些有趣的內(nèi)容記住~
比如 正面推倒妹子,就是X,妹子側(cè)躺著欣賞,就是Y,妹子玉體橫陳就是Z。
以及定義3D縮放轉(zhuǎn)換scaleX(x),scaleY(y),scaleZ(z)
translateX(x),transformY(y),transformZ(z)來(lái)定義3D轉(zhuǎn)換。
border-radius屬性:

使用該屬性可以給任何元素制作“圓角”。

@font-face規(guī)則:
<style>
自定義字體
@font-face
{
font-family: myFirstFont;
src: url(sansation_light.woff);
}
div
{
font-family:myFirstFont;
}
</style>
文本效果

文本陰影,text-shadow:5px 5px 5px #ff0000;
盒子陰影,box-shadow:10px 10px 5px #888888;
文本溢出屬性,text-overflow

按鈕

CSS3的按鈕添加了更多顏色或者邊框啊,圓潤(rùn)程度的改變,并沒(méi)有什么太大的亮點(diǎn)。

6.margin塌陷

參考原文

  • margin屬性,注意幾點(diǎn):
    1 如果 margin 的值是百分比,則是相對(duì)于父元素的內(nèi)容盒寬度來(lái)計(jì)算的,即使 margin-top 和 margin-bottom 也是如此。因此即使父元素的高寬不相等,子元素的 margin 元素指定了相同的百分比值,則子元素各個(gè)方向的 margin 計(jì)算值都是相等的。
    2 margin-top 和 margin-bottom 值對(duì)行內(nèi)非替換元素(non-replaced inline element)是無(wú)效的。因此我們可以指定 img 元素的 margin-top 和 margin-bottom,而非替換行內(nèi)元素(如 i,span 等)設(shè)置 margin-top 和 margin-bottom 卻不會(huì)產(chǎn)生效果。
    (非替換元素是指該元素的height和width屬性的大小由其內(nèi)容決定,而不能直接設(shè)置)
  • 相鄰的margin
    兩個(gè)margin符合垂直相連的的四種情況,滿足其中之一即可:
    1 父元素的 top margin 和第一個(gè)子元素的 top margin
    2 父元素的bottom margin 和最后一個(gè)子元素的 bottom margin
    3 元素的 bottom margin 和與這個(gè)元素相鄰的兄弟元素的 top margin
    4 如果一個(gè)元素,它沒(méi)有生成 BFC、沒(méi)有包含正常流的子元素、min-height是0、height是0或者 auto,則它的 top margin 和 bottom margin 也是垂直毗連的

如果兩個(gè)margin滿足以下三個(gè)條件,我們就說(shuō)這兩個(gè)margin是相鄰的:
1 這兩個(gè)margin是垂直相連的,即滿足上面四種情況之一
2 margin的兩個(gè)元素都是正常流的塊級(jí)元素,并且在同一個(gè)BFC中
3 兩個(gè)margin之間沒(méi)有行盒、清除浮動(dòng)后的空隙、padding和border。

  • margin折疊
    即相鄰的margin有可能會(huì)被折疊成一個(gè)。
    比如元素 #a 指定了 margin-bottom 為 10px,而它下方的元素 #b 指定了 margin-top 為 20px,


    image

元素 #a 的 margin-bottom 和元素 #b 的margin-top 在位置上重疊了,它們之間的距離是 20px,即元素 #b 的 bottom margin 長(zhǎng)度,這就是 margin 折疊現(xiàn)象。關(guān)于這個(gè)現(xiàn)象,可以這么理解:

margin 定義的是它與其他盒子之間的最小間距。其中元素 #a 指定了 margin-bottom 為 10px,就表明它下方的元素 #b 與它至少要有 10px 的距離,它指定的是一個(gè)最小值,因此實(shí)際的距離可以比這個(gè)大。

元素 #a 下方的元素 #b 也設(shè)置了 margin-top 為 20px,如果不折疊,則他們之間就有 30px 的距離。如果折疊成了一個(gè) 20px 的距離,則對(duì)元素 #a 來(lái)說(shuō),它的 margin-bottom 要求至少要有 10px 的距離,是滿足的,而對(duì)于元素 #b 來(lái)說(shuō),它的 margin-top 要求至少要有 20px 的距離,也是滿足的。

而 margin 折疊的存在,其實(shí)是為了可以在視覺(jué)上顯得更美觀,也更貼近設(shè)計(jì)師的預(yù)期。

-margin的折疊規(guī)則
并不是所有的margin都可以折疊,需要滿足以下條件:
1 垂直相鄰的margin才有可能折疊,水平margin永遠(yuǎn)不折疊
2 根元素(即html)的margin永遠(yuǎn)不折疊
3 如果一個(gè)元素,它的 top margin 和 bottom margin 是相鄰的,并且有清除浮動(dòng)后的空隙(clearance),這個(gè)元素的 margin 可以跟兄弟元素的 margin 折疊,但是折疊后的 margin 不能跟父元素的 bottom margin 折疊。

-折疊后的Margin大小

當(dāng)兩個(gè)或者兩個(gè)以上的 margin 折疊后,margin 的值計(jì)算如下:
1 如果 margin 都是正數(shù),則取他們當(dāng)中的最大值
2 如果 margin 中有正有負(fù),則取最大的正數(shù)加上最小的負(fù)數(shù)(如最大的 margin是 20px,最小的 margin 是 -20px,則他們計(jì)算后的值是 0)
3 如果 margin 中都是負(fù)數(shù),則取他們當(dāng)中的最小值

  • 如何解決margin塌陷
例1:針對(duì)——>“* 兩個(gè) margin 之間沒(méi)有行盒(line box)、清除浮動(dòng)后的空隙(clearance)、padding和邊框”

如圖所示:


image

如果 #container 沒(méi)有下邊框,則 #container 的 bottom margin 和 #inner 的 bottom margin 是相鄰的,因此它們折疊了,并且 #inner 撐開(kāi)了 #container 元素,所以可以看到 #container 元素的高度變成了 10px,且顯示的是 #inner 的紅色背景
我們通過(guò)增加padding的方式來(lái)阻止Margin的折疊:


image

當(dāng)給 #container 添加一個(gè)下邊框,兩個(gè) margin 之間就邊框的阻隔,他們就不相鄰了,因此不能折疊。所以可以看到 #container 被撐開(kāi)成了 20px,其中 10px 是 #inner 的高度,還有 10px 是 #inner 的 bottom margin,并且由于 margin 是透明的,因此 #container 露出了部分藍(lán)色的背景。
例2:針對(duì)——>'* margin 的兩個(gè)元素都是正常流的塊級(jí)元素,并且在同一個(gè) BFC 中''

我們通過(guò)創(chuàng)建新的BFC來(lái)阻止Margin的折疊:

image

如上圖 #container 元素和 #inner 元素同屬于一個(gè) BFC 中,#container 的 top margin 和 #inner 的 top margin 折疊,bottom margin 同理。
但如果讓 #container 跟 #innter 處在不同的 BFC 中,則 top margin 和 bottom margin 都不會(huì)折疊,如:

image

給 #container 元素增加一個(gè) overflow: hidden 屬性,讓它的內(nèi)容盒生成一個(gè)獨(dú)立的 BFC,而 #inner 處于這個(gè)獨(dú)立的 BFC 中,因此 #container 和 #inner 就處于兩個(gè)不同的 BFC 中了,所以他們的 margin 不能折疊。

例3:針對(duì)——>"* 如果一個(gè)元素,它本身的 top margin 和 bottom margin 是相鄰的,并且有清除浮動(dòng)后的空隙(clearance),這個(gè)元素的 margin 可以跟兄弟元素的 margin 折疊,但是折疊后的 margin 不能跟父元素的 bottom margin 折疊"
image

給父元素 #container 設(shè)置了一個(gè)灰色背景,并且沒(méi)有設(shè)置高度,因此高度會(huì)隨著內(nèi)容而擴(kuò)展,margin 設(shè)置為 50px。
其中有一個(gè)紅色的浮動(dòng)元素 #floated,高寬都設(shè)置為 40px。
給 #cleared 設(shè)置了 15px 的 margin,并且元素的高度、padding、margin 都為0,因此 #cleared 元素的 top margin 和 bottom margin 是相鄰的。這個(gè)元素的位置如下圖所示:


image

因?yàn)?#cleared 元素清除了左浮動(dòng),所以 #cleared 元素下移。
而 #cleared 元素和 #slibling 元素的 margin 折疊了,因此可以看到他們的位置是重疊的。


image

由于這條規(guī)則的存在,導(dǎo)致他們折疊后的 margin 不能跟 #container 的 bottom margin 進(jìn)行折疊,因此 #container 的高度被撐開(kāi)。

如果沒(méi)有這條規(guī)則,他們還應(yīng)該跟 #container 的 bottom margin 進(jìn)行折疊,如:


image

以上這張圖,在去掉了 #cleared 元素的 clear 屬性之后,就不滿足這條規(guī)則了,所以可以看到 #container 的高度就只有 40px,即紅色的浮動(dòng)元素的高度,而 #cleared 元素、#sibling 元素、#container 元素的 margin 都折疊成了一個(gè)。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容