CSS布局中浮動問題怎么解決

發(fā)布時間：2021-03-17 12:24:29 來源：億速云閱讀：171 作者：清風欄目：web開發(fā)

本文將為大家詳細介紹“CSS布局中浮動問題怎么解決”，內(nèi)容步驟清晰詳細，細節(jié)處理妥當，而小編每天都會更新不同的知識點，希望這篇“CSS布局中浮動問題怎么解決”能夠給你意想不到的收獲，請大家跟著小編的思路慢慢深入，具體內(nèi)容如下，一起去收獲新知識吧。

一、起因：

CSS布局中浮動問題怎么解決

子盒子設置浮動之后效果：

CSS布局中浮動問題怎么解決

由此可見，藍色的盒子設置浮動之后，因為脫離了標準文檔流，它撐不起父盒子的高度，導致父盒子 高度塌陷 。如果網(wǎng)頁中出現(xiàn)了這種問題，會導致我們整個網(wǎng)頁的布局紊亂

二、解決方案：

父盒子設置固定高度------------------給父元素添加固定的高度
內(nèi)墻法 -------------------------------在父元素的后面添加一個空的div添加樣式為 clear:both
偽元素清除法-------------------------給父元素類名添加一個類叫 clearfix （推薦）
overflow:hidden---------------------給父元素樣式添加 overflow:hidden

（1）父盒子設置固定高度

CSS布局中浮動問題怎么解決

雖然，給父盒子設置了固定高度能暫時解決我們的問題，但是它的使用不靈活，如果未來子盒子的高度需求發(fā)生了改變(網(wǎng)頁的多處地方)，那么我們得手動需要更改父盒子的高度。后期不易維護。

應用：網(wǎng)頁中盒子固定高度區(qū)域，比如固定的導航欄。

缺點：使用不靈活，后期不易維護

（2）內(nèi)墻法

在浮動元素的后面加一個空的塊級元素 (通常是div),并且該元素設置 clear:both； 屬性。clear屬性，字面意思就是清除，那么both,就是清除浮動元素對我左右兩邊的影響。

代碼如下：

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>浮動元素的破壞性</title>
        <style type="text/css">
            .father{
                border: 1px solid red;
            }
            .child{
                width: 200px;
                height: 200px;
                float: left;
                background-color: green;
            }
            .clearfix{
                clear: both;
            }
        </style>
    </head>
    <body>
        <div class="father">
            <div class="child">兒子</div>
            <div class="clearfix"></div>
        </div>
    </body>
    </html>

應用：網(wǎng)頁中應用不多，只是為了引導下一個清除浮動的方式。

缺點：結構冗余

（3）偽元素清除法

內(nèi)墻法是在浮動元素的后面加一個空的塊級元素 (通常是div),并且該元素設置 clear:both； 屬性。

那么正好在css3的屬性用法中整好有個選擇器也完全符合這個用法，偽元素選擇器。它就像偽類一樣，讓偽元素添加了選擇器，但不是描述特殊的狀態(tài)，允許為元素的某些部分設置樣式。

CSS布局中浮動問題怎么解決

表示在p標簽元素的最后面添加樣式，同時這也正好符合內(nèi)墻法的用法。

代碼如下：

<!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>浮動元素的破壞性</title>
        <style type="text/css">
            .father{
                border: 1px solid red;
            }
            .child{
                width: 200px;
                height: 200px;
                float: left;
                background-color: green;
            }
            .cleafix:after{
                content:'.';
                display: block;
                clear: both;
                overflow: hidden;
                height: 0;
            }
        </style>
    </head>
    <body>
        <div class="father clearfix">
            <div class="child">兒子</div>
        </div>
    </body>
    </html>

當以后需要清除浮動時只需要在標簽中再添加一個 “clearfix” 類就行，十分的方便快捷！

編寫的偽元素清除法內(nèi)容解釋：

.clearfix:after{
        content:'';    　　　表示給.clearfix元素內(nèi)部最后添加一個內(nèi)容，該內(nèi)容為行內(nèi)元素。
        display: block;   　　　　設置該元素為塊級元素，符合內(nèi)墻法的需求。（有的地方使用table，因為table也是一個塊級元素）
        clear: both;  　　　 清除浮動的方法。必須要寫
        overflow: hidden; 　　　　如果用display:none;,那么就不能滿足該元素是塊級元素了。overflow:hidden;表示隱藏元素，但是該元素占位置；而display:none;不占位置。
        height: 0;
    }

此處梳理一下：after（偽類）和：：after（偽元素）的區(qū)別

相同點

都可以用來表示偽類對象，用來設置對象前的內(nèi)容
:before和::before寫法是等效的; :after和::after寫法是等效的，版本不同而已

不同點

:before/:after是Css2的寫法，::before/::after是Css3的寫法
:before/:after 的兼容性要比::before/::after好，
不過在H5開發(fā)中建議使用::before/::after比較好

注意

這些偽元素要配合content屬性一起使用
這些偽元素不會出現(xiàn)在DOM中，所以不能通過js來操作，僅僅是在 CSS 渲染層加入
這些偽元素的特效通常要使用:hover偽類樣式來激活

（4）overflow:hidden

CSS屬性overflow定義一個元素的內(nèi)容太大而無法適應盒子的時候該做什么。它是overflow-x和overflow-y的簡寫屬性

CSS布局中浮動問題怎么解決

overflow屬性不僅僅能實現(xiàn)以上效果，那么當一個元素設置了overflow:hidden|auto|scroll屬性之后，它會形成一個BFC區(qū)域，我們叫做它為 塊級格式化上下文 。

BFC只是一個規(guī)則。它對浮動定位都很重要。浮動定位和清除浮動只會應用于同一個BFC的元素。

浮動不會影響其它BFC中元素的布局，而清除浮動只能清除同一BFC中在它前面的元素的浮動。

CSS布局中浮動問題怎么解決

優(yōu)點：代碼簡潔

缺點：內(nèi)容增多的時候容易造成不會自動換行導致內(nèi)容被隱藏掉，無法顯示要溢出的元素

總結：只要我們讓父盒子形成BFC的區(qū)域，那么它就會自動清除區(qū)域中浮動元素帶來的影響。

哪些會形成BFC區(qū)域：

CSS布局中浮動問題怎么解決

如果你能讀到這里，小編希望你對“CSS布局中浮動問題怎么解決”這一關鍵問題有了從實踐層面最深刻的體會，具體使用情況還需要大家自己動手實踐使用過才能領會，如果想閱讀更多相關內(nèi)容的文章，歡迎關注億速云行業(yè)資訊頻道！

向AI問一下細節(jié)

CSS布局中浮動問題怎么解決

猜你喜歡

最新資訊

相關推薦

相關標簽