浮動與清除浮動(已完結)

2018-06-04 23:50:00

浮動與清除浮動

浮動

float屬性的取值

float : left | right | none | inherit

預設值 : none

适用于所有元素，沒有繼承性

浮動框的範圍

浮動元素的外邊距邊界定義了浮動框的大小

浮動元素的包含塊是其最近的塊級祖先元素，且包含塊的大小為該塊級祖先元素的内容區
浮動元素的特點

1.浮動元素會脫離标準文檔流(這就是為什麼浮動元素不能撐開父元素的高，以及浮動元素會覆寫非浮動元素的原因)

2.浮動元素會生成一個塊級框，而無論這個元素本身是什麼(比如行内元素。是以行内元素一旦浮動，便能夠為其設定寬高)

浮動元素的一些行為及規則(僅列出一些常用的)

1.浮動元素不能超出包含塊的邊界(不包括底邊)，這就是為什麼多個浮動元素出現在同一水準行時，一旦一行容不下後續的浮動元素，後續的浮動元素會換行的原因

但是，如果浮動元素本身的寬就大于包含塊的寬，則允許超出

另外，為浮動元素設定負margin，使其超出包含塊也是允許的

2.行内框與一個浮動元素重疊時，其邊框、背景、内容都在該浮動元素外顯示。塊框與一個浮動元素重疊時，其邊框、背景在該浮動元素之下顯示，而内容在浮動元素之外顯示

例如

<style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
        }
        .div1{
            width: 100px;
            height: 100px;
            float: left;
            background-color: red;
        }
        span{
            background-color: blue;
        }
    </style>
    <body>
        <div class='div1'></div>
        <span>qwert</span>
    </body>

清除浮動

取值

clear : left | right | both | none | inherit

适用于塊級元素(一定注意)，無繼承性

清除浮動的原理

如果元素設定了clear(非none與inherit值)，則使用者代理會在元素上外邊距的基礎上再增加額外的間隔(這個間隔的術語叫‘清除區域’)，以将元素移到浮動框下邊界的下面(剛好移到下邊界即可)

這就是浮動元素不會覆寫清除浮動元素的原因

怎麼使浮動元素也能撐開包含塊的高

使包含塊也浮動

原理是：浮動元素會延伸，進而包含其所有後代浮動元素

<style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
        }
        .wrapper{
            width: 100px;
            background-color: red;
        }
        .inner{
            width: 50px;
            height: 50px;
            background-color: orange;
            float: left;
        }
        .flag-clear{
            clear: both;
        }
    </style>
    <body>
        <div class='wrapper'>
            <div class="inner"></div>
            <div class="flag-clear"></div>
        </div>
    </body>

隻要flag-clear在清除浮動後，邏輯上在inner後面即可，并不用給flag-clear設定大小。撐開的原理就是前面說的——flag-clear的上外邊距會增加

僞元素與clear相結合(常用)

<style type="text/css">
        *{
            margin: 0px;
            padding: 0px;
        }
        .wrapper{
            width: 100px;
            background-color: red;
        }
        .inner{
            width: 50px;
            height: 50px;
            background-color: orange;
            float: left;
        }
        .wrapper::after{
            content: '';
            display: block;
            clear: both;
        }
    </style>
    <body>
        <div class='wrapper'>
            <div class="inner"></div>
        </div>
    </body>

ps：本文案參考了以下書籍

《CSS權威指南》

原文釋出時間：2018年06月29日 16:47:17

原文作者：earth_smallma

本文來源

CSDN

，如需轉載請聯系原作者

浮動與清除浮動(已完結)