CSS中float和margin混合使用的案例

小編給大家分享一下CSS中float和margin混合使用的案例，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

float屬性

float: left | right | none | inherit

當(dāng)然最常用的還是前面兩個(gè)：向左浮動(dòng)和向右浮動(dòng)

浮動(dòng)最主要的特點(diǎn)：脫標(biāo)。

脫離標(biāo)準(zhǔn)流，處于更加高級(jí)的層面，影響父元素和后面元素的布局，這里就不具體介紹了。

margin屬性

這里主要講margin-left和margin-right

margin-left: 設(shè)置元素的左外邊距。
margin-right: 設(shè)置元素的右外邊距。

總的來說，這個(gè)兩個(gè)屬性的字面理解還是很容易的，但是越簡(jiǎn)單的東西越不要小看。

重點(diǎn)

以下代碼：

html:

<div class="box">
    <div class="zi_box1">1</div>
    <div class="zi_box2">2</div>
    <div class="zi_box3">3</div>
    <div class="clear"></div>
</div>

CSS:

.box {
            background-color: #555555;
            width: 600px;
            height: 200px;
        }
        .zi_box1 {
            float: left;
            background-color: #c23232;
            width: 200px;
            height: 100px;
        }
        .zi_box2 {
            float: left;
            background-color: chartreuse;
            width: 200px;
            height: 100px;
        }

        .zi_box3 {
            float: left;
            background-color: blue;
            width: 200px;
            height: 100px;
        }
        .clear {
            clear: both;
        }

最后實(shí)現(xiàn)的效果圖：

三個(gè)子盒子充滿父盒子，因?yàn)榈麄儗挾瓤梢栽诟负凶永锩鎿伍_。

如果父盒子撐不開呢？

加大一個(gè)子盒子的寬度，序號(hào)為3的盒子

zi_box3 {
    width: 300px;
}

效果圖如下：

那么第三個(gè)盒子則會(huì)另外起一行。

結(jié)合margin使用時(shí)

在第一代碼的基礎(chǔ)上，增加一個(gè)margin值

zi_box1 {
    margin-left: 20px;
}

這時(shí)候，由于三個(gè)盒子的寬度加上margin值大于父盒子的寬度，所以盒子3就會(huì)另起一行

反之，給盒子3設(shè)置一個(gè)外邊距的值，盒子1和盒子2不設(shè)置外邊距，是不是盒子3也會(huì)另外起一行呢？答案是肯定的，因?yàn)樗麄兊膶挾纫呀?jīng)超過父盒子的值了。

實(shí)現(xiàn)三列布局

在不改變DOM的順序的情況下，使盒子3，盒子1，盒子2的順序呢？是不是就可以充分使用margin這個(gè)屬性了。最開始白癡的我（很少練習(xí)布局吧，大神就不要噴我了，我只是個(gè)菜鳥）

白癡代碼

.zi_box1 {
     margin-left: 200px;       
}
.zi_box2 {
     margin-left: 200px;       
}

.zi_box3 {
     margin0left: -400px;
}
//這里很天真的想法，以為每個(gè)元素是單獨(dú)行動(dòng)

這樣寫的效果圖：

我當(dāng)時(shí)就傻了，這是什么玩意。

但是在最后的摸索中，我知道原因了，最最最最重要的就是DOM的執(zhí)行順序

造成這樣的原因就是：盒子1先解析，margin-left: 200px,那么這樣盒子3也就去了第二行; 再盒子2解析，margin-left：200px，那么盒子2也去了第二行，因?yàn)榈谝恍幸呀?jīng)有600px這么寬的長(zhǎng)度了。最后解析盒子3，margin-left：-400px,盒子向前移動(dòng)400px,不就造成了這樣的效果圖嘛。

這樣想的，就是指考慮片面的，而不是全局的

實(shí)現(xiàn)三列布局的最終代碼

.zi_box1 {
     margin-left: 200px;       
}
.zi_box2 {
     margin-left: 0px;      
}

.zi_box3 {
     margin0left: -600px;
}

效果圖

可以簡(jiǎn)單的這樣理解

盒子1向右移動(dòng)200px，那么盒子2和盒子3也會(huì)向右移動(dòng)200px,具體的效果圖如下

那么盒子3移動(dòng)到前面去，是不是需要600px的距離?。ㄊ遣皇呛苋菀锥?，嘻嘻），當(dāng)然這只是我的片面理解，也不完全是對(duì)的。

那么float: right和margin-right是一樣的道理。

以上是“CSS中float和margin混合使用的案例”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！