CSS 浮動為什麼會塌陷以及解決方案

阿新 • • 發佈：2019-01-07

CSS 浮動為什麼會塌陷

浮動

浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。
浮動脫離文件流，所以文件的普通流中的塊框表現得就像浮動框不存在一樣。

浮動塌陷

當元素設定浮動而父元素的寬高沒有設定時，高度會塌縮為0。如圖
浮動塌陷

解決方案

1 在父元素裡面填加一個沒寬度高度的元素使用clear:both

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        #div1 
{
          border :1px solid #595959;
        }
        #div2{
            width: 200px; 
            height: 200px;
            background-color: #172FC0;
            float: left;
        }
        .clear:after{/*清除浮動*/
            content: '';
            display:block;
            clear: both;
        } 

    </style>
</head>
<body>
    <div id="div1" class="clear">
            <div id="div2"  >      
            </div>
    </div>
</body>
</html>

浮動塌陷

按照我的理解在外部div的後面加上了一個沒有高度和寬度的元素，並且使用了clear清除了左右的浮動使得兩邊沒有浮動物件讓整個內容被撐開。

2 使用overflow:hidden

<!DOCTYPE html> 

<html>
<head>
    <title></title>
    <style type="text/css">
        #div1{
          border :1px solid #595959;
          overflow: hidden;/*清除浮動*/
        }
        #div2{
            width: 200px; 
            height: 800px;
            background-color: #172FC0;
            float: left;
        }
        .clear:after{
            content: '';
            display:block;
            clear: both;
        }
    </style>
</head>
<body>
    <div id="div1" >
            <div id="div2"  >

            </div>
    </div>
</body>
</html>

overflow:hidden觸發了外層的BFC佈局，使得內層的高度被計算。

3 給父元素新增高度

CSS 浮動為什麼會塌陷以及解決方案

CSS 浮動為什麼會塌陷浮動浮動的框可以向左或向右移動，直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。浮動脫離文件流，所以文件的普通流中的塊框表現得就像浮動框不存在一樣。浮動塌陷當元素設定浮動而父元素的寬高沒有設定時，高度會塌縮為

安裝CentOS 7.4 可能會出現的坑以及解決方案

dhcp 以及支持 bubuko 相關 ~~ inf 啟動 height 安裝CentOS 7.4 可能會出現的坑以及解決方案（解決方法不唯一，如果行不通的話emmmm~~，百度會啥你會啥~~）坑.0X01 解決：退出虛擬機，以管理員權限運行坑.

iOS 12 在系統中文鍵盤上使用 AutoFill 會遇到詭異的問題以及解決方案

感謝我們 iOS 團隊的趙恆、劉家飛發現此 bug。一. 問題描述首先，建立一個 textFie

CSS盒子塌陷問題解決方案

什麼是盒子塌陷？外部盒子本應該包裹住內部的浮動盒子，結果卻沒有。問題出現的原因父元素只包含浮動元素，那麼它的高度就會塌縮為零（前提就是你們沒有設定高度（height）屬性，或者設定了為auto，就會出現這種情況，如果父元素不包含任何的可見背景，這個問

內存溢出和內存泄漏的區別、產生原因以及解決方案轉

服務 har 操作 ger 遞歸調用問題 let share 查錯內存溢出 out of memory，是指程序在申請內存時，沒有足夠的內存空間供其使用，出現out of memory；比如申請了一個integer,但給它存了long才能存下的數，那就是內存溢出。內

移動端300ms的點擊延遲以及解決方案

string 明顯而是一段通過然而監聽屬性 sca 【今天做在移動端的一些效果時，我選擇使用動畫而不是用過渡，這個300ms的點擊延遲是我為什麽使用動畫而不使用過渡最主要的一個原因】動畫和過渡共同點：都是css控制DOM運動，不同點： 1、過渡：只有兩個關

移動端開發經常遇見的問題以及解決方案

誤差 cli 輸入關鍵詞水平居中 arch asi 服務器 color del 1.移動端左右滑動右側有留白出現這種問題的話查看一下自己的css中有沒有用到position:relative或者position:absolute,我做頁面的時候經常遇到這個問題，百分之

symfony window下的安裝安裝時候出現的問題以及解決方案

url name symfony exc isf .com issue tps 解決 1. cmd進入DOS ， cd 到 php.exe 的目錄下 2. php -r "readfile(‘http://symfony.com/installer‘);

內存溢出和內存泄漏的區別，產生原因以及解決方案

解決方案集合類釋放內存分頁需求查看內存取出程序 tof 一、概念與區別內存溢出 out of memory，是指程序在申請內存時，沒有足夠的內存空間供其使用，出現out of memory；比如申請了一個integer,但給它存了long才能存下的數，那就

關於mysql無法添加中文數據的問題以及解決方案

ima ges chart 設置語句成功博客數據 set 　　今天弄了一天的mysql數據庫，就是被一個mysql數據庫亂碼的問題給纏住了。現在記錄一下這個問題，雖然這個問題不是什麽太大的事情，但還是記錄一下。　　問題是這樣的：　　1、先在mysql

db2 常見錯誤以及解決方案[ErrorCode SQLState]

綁定不支持 generate replace 成功 sel 內存 one tables 操作數據庫流程中，遇到許多疑問，很多都與SQL CODE和SQL State有關，現在把一個完整的SQLCODE和SQLState不正確信息和有關解釋作以下說明，一來可以自己參考，

史上最大CPU缺陷Meltdown融毀和Spectre幽靈來襲，各網絡設備廠家反饋以及解決方案匯總

dir ase agg 部分 arm 暴露 ace ado shadow 2018新年快樂新年好，轉眼就到了2018。首先祝福大家新年快樂，萬事如意！熱鬧的一月就在大家剛享受完短暫的元旦假期，1月3號互聯網上就爆出了一個非常勁爆的消息，Intel，AMD，ARM的CP

Maven安裝中的問題以及解決方案

替換 point 多余外部命令導致 post mar mage environ 一、安裝後mvn -version 顯示 ‘mvn’不是內部或外部命令，也不是可運行的程序或者批處理文件 1.粗心問題解決方案：首先在cmd中查看maven安裝路徑：echo %M2_H

hive 研究：搭建過程中遇到的問題以及解決方案

exce rep 命令 net sign 徹底 clas pos nod 1、使用rpm -ivh 命令安裝hive是出現Header V3 DSA/SHA1 Signature, key ID 5072e1f5: NOKEY警告在命令後面加上 --force --n

Oracle生產中跑批存儲過程或函數失效原因分析以及解決方案

nap rbm apt state tbb cap vsx oracl fig p,li { white-space: pre-wrap } Oracle生產中跑批存儲過程或函數失效原因分析以及解決方案: 報錯信息: 原因分析: 1.當我們編譯存儲過程或函數時,該過程

記一筆vue中的中央事件總線的問題，以及解決方案

ole work 手動 lag debug 事件總線 lse 沒有導致代碼結構：首先HeaderNav組件是被單獨拎出來的，router-view中就對應了內容組件，由於有時候i有的界面的header內容是不一樣的，因此要用到兄弟組件的相互通信，這個時候我首先選擇了bu

關於在使用sparksql寫程序是報錯以及解決方案：org.apache.spark.sql.AnalysisException: Duplicate column(s): "name" found, cannot save to file.

文件加載 mod 但是路徑 win 錯誤寫入技術分享 over 說明：　　spark --version : 2.2.0 　　我有兩個json文件，分別是emp和dept： emp內容如下： {"name": "zhangsan", "age": 26, "dep

CSS 浮動為什麼會塌陷以及解決方案