float詳解、聖盃佈局

時間 2019-11-16

標籤 float 詳解佈局欄目 CSS 简体版

原文原文鏈接

1、開始

雖然如今有了flex彈性盒子模型，不少佈局效果均可以經過flex盒子來實現，但因爲flex盒子模型的兼容性不容樂觀html

ie至少要10才能支持flex，因此仍是頗有必要學習float流式佈局的app

2、實例

正常的塊級元素的佈局是這樣的：（文字表明元素的float屬性）佈局

對於float佈局要記住：學習

　　1.若是浮動元素的上一個元素也是浮動，那麼該元素會與上一個元素排列在同一行，若是行寬不夠，後面的元素會被擠到下一行flex

　　2.若是浮動元素的上一個元素不是浮動，那麼該元素仍然處於上一個元素的下方，根據浮動設定在左或者在右，而其自己也脫離普通流，後邊的元素會自動往上移動到上一個普通流元素下方爲止spa

對第二個元素設置float：left，由於紅色塊不是浮動，因此橙色塊仍在紅色塊下方，紫色塊會向上移動到紅色塊（普通流）下方爲止3d

若是對紫色塊設置float：right，則紫色塊和橙色塊都會位於紅色塊（普通流）下方，而紫色塊相鄰的下一個綠色塊也會向上移動到紅色塊（普通流）下方。code

若是咱們想讓綠色塊留在本來屬於他的一行而不向上移動，能夠給他加上clear:both，這樣他就不會移動了htm

關於清除浮動：blog

　　1.清除浮動並非說讓浮動元素回到文檔流
　　2.清除浮動只會改變改元素自身的位置，而且只針對排在該元素前面的元素。目的是讓本身的左邊或者右邊沒有浮動元素

固然用clear作更多的事，好比咱們不想讓紫色塊和橙色塊在同一行，能夠在紫色塊上加clear：left

若是咱們給綠色塊加的屬性不是clear：both，而是clear：left的話，紫色塊和綠色塊就在同一行了

關鍵是記住一項元素佈局的是他的上一個元素：

好比咱們給橙色塊加clear：right，紫色塊不加clear，則橙色塊和紫色塊在同一行，橙色塊的clear屬性不會影響到紫色塊：

高度坍塌：

　　若是子元素是浮動，而父元素內沒有其餘內容，父元素的高度就會消失，咱們能夠經過設置border看到這個現象：

　　這個問題咱們能夠經過在父元素後面添加另一個普通流元素來解決，最簡單的就是用：after僞元素啦：

<style>
    #wrapper{
        width: 120px;
        margin: 50px auto;
        border:2px solid black;
    }
    .container{
        width: 100px;
        height: 100px;
        float: left;
        background: blue;
    }
    #wrapper:after{
        content: ' ';
        display: block;
        height: 0;
        visibility: hidden;
        clear: both;
    }
</style>
<body>
    <div id = 'wrapper'>
        <div class = "container">
        </div>
    </div>
</body>

這樣就解決了高度坍塌的問題

3、聖盃佈局

所謂聖盃佈局，便是兩邊定寬，而中間自適應的一種佈局：用到浮動、負邊距、相對定位，不添加額外標籤

html結構爲：

<div class = "header">header</div>
    <div class = "container">
        <div class = "left">left</div>
        <div class = "center">center</div>
        <div class = "right">right</div>
    </div>
<div class = "footer">footer</div>

填好一些公用的樣式：

.header,
    .footer{
        background: grey;
        height: 50px;
        width: 100%;
        text-align: center;
        line-height: 50px;
    }
    .left,
    .center,
    .right{
        height:50px;
        text-align: center;
        line-height: 50px;
    }
    .left{
        background: red;
    }
    .center{
        background: black;
    }
    .right{
        background: purple;
    }

這時候頁面的結構爲：

接下來咱們想讓left和right各佔50px寬度，中間自適應：

.header,
    .footer{
        background: grey;
        height: 50px;
        width: 100%;
        text-align: center;
        line-height: 50px;
    }
    .container{
        padding: 0 50px;
    }
    .left,
    .center,
    .right{
        position: relative;
        text-align: center;
        line-height: 50px;
    }
    .left{
        float: left;
        width: 50px;
        margin-left: -50px;
        background: red;
    }
    .center{
        float: left;
        width:100%;
        background: black;
    }
    .right{
        float: left;
        margin-left: -50px;
        right: -50px;
        width:50px;
        background: purple;
    }
    .footer{
        clear:both;
    }

即修改了container左右padding:50px，center寬度100%，所有向左浮動，再加上left和margin等屬性使之排列在一行

咱們但願中間部分的高度被內容撐開，但此時若是任意一個的高度改變，其他兩個的高度是不會變的：

這個問題咱們能夠經過padding補償發來解決：

.container{
        padding: 0 50px;
        overflow: hidden;
    }
    .left,
    .center,
    .right{
        position: relative;
        text-align: center;
        line-height: 50px;
        padding-bottom: 1000px;
        margin-bottom: -1000px;
    }

主要是修改外層container的overflow：hidden，給子元素一個足夠大的padding並margin負值回來，就可以同時改變高度了：

最終代碼：

<style>
    #wrapper{
        width: 300px;
        height: 1000px;
        margin: 50px auto;
        line-height: 200px;
        font-size: 20px;
        color: white;
        text-align: center;
        overflow: hidden
    }
    .header,
    .footer{
        background: grey;
        width: 100%;
        text-align: center;
        line-height: 50px;
    }
    .container{
        padding: 0 50px;
        overflow: hidden;
    }
    .left,
    .center,
    .right{
        position: relative;
        text-align: center;
        line-height: 50px;
        padding-bottom: 1000px;
        margin-bottom: -1000px;
    }
    .left{
        float: left;
        width: 50px;
        margin-left: -50px;
        background: red;
    }
    .center{
        float: left;
        width:100%;
        height: 100px;
        background: black;
    }
    .right{
        float: left;
        margin-left: -100%;
        right: -100%;
        width:50px;
        background: purple;
    }
    .footer{
        clear:both;
    }
</style>
<body>
    <div id = 'wrapper'>
        <div class = "header">header</div>
        <div class = "container">
            <div class = "left">left</div>
            <div class = "center">center</div>
            <div class = "right">right</div>
        </div>
        <div class = "footer">footer</div>
    </div>
</body>

至此，就簡略的複習完了float和聖盃佈局的基本知識點

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。