css中的高度塌陷以及開啟BFC的方法

阿新 • • 發佈：2019-02-08

開啟BFC實驗

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box1{
            background-color: pink;
            /*height: 200px;*/
            width: 300px;

            /*開啟BFC的方法*/
            /*一、開啟父元素的同方向浮動；那麼父元素和子元素一起脫離了文件流，
            父元素下面的同級元素依舊會上移，但是父元素也算是有了高度！這個高度和子集元素高度一致！*/ 

            /*float: left;*/

            /*二、設定父級元素為絕對定位或者固定定位，和設定浮動的效果一樣。*/
            /*position:absolute;*/

            /*三、設定父級元素的display為incline-block，也就是將父級元素變成了行內塊級元素？？？？？脫離文件流？？？
            父元素下面的同級元素會在原本文件流中的位置下些許下移，考慮是由於變成了塊級元素導致兩個塊級元素導致？？？
            父級元素的高度被子級元素撐開了！
            設定成：display:block;就不行！
            */ 

            /*display:inline-block;*/

            /*四、設定父級元素的overflow非預設屬性：
           父級元素會被子元素撐開,高度就是子元素的高度;
           父元素下面的同級元素不會上移。*/
            /*overflow:hidden;*/

            /*五（未開啟BFC，但是解決了高度塌陷問題！）、設定父元素的高度，這種方法照成的結果和開啟overflow的結果一致；但是本質應該是不相同的。*/
            /*height: 100px;*/
        }

        /*六、給塌陷的父級元素的最後新增一個元素，使該元素清除浮動，呈現塊級樣式。也可解決高度塌陷問題！*/ 

        /*.box1:after{*/
            /*content: '';*/
            /*display: table;*/
            /*clear: both;*/
        /*} */






        .box2{
            height: 300px;
            width: 300px;
            background-color: red;
        }
        .b1{
            background-color: purple;
            width: 100px;
            height: 100px;
            float: left;
        }
        .b2{
            background-color: green;
            width: 100px;
            height: 100px;
            float: left;
        }
    </style>
</head>
<body>
<div class="box1">
    <div class="b1"></div>
    <div class="b2"></div>
    <div class="clearfix"></div>
</div>
<div class="box2"></div>
</body>
</html>

css中的高度塌陷以及開啟BFC的方法

開啟BFC實驗 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

css中清除浮動的幾種方法(撐起浮動元素父元素的高度)

css浮動會使子元素脫離文件流，有些情況下會使其父元素失去高度，從而影響頁面的整體佈局，造成意想不到的佈局效果，這裡總結了幾種常用的清除浮動影響的方法，簡單介紹各種方法的適用範圍和優缺點。 1.設定父元素的overflow屬性的屬性值為"hideen"，但是此方法會影響到於

css防止浮動元素父元素高度塌陷的三個方法

.clearfix:after{ content:""; display:block; clear:both; height:0; } .clearfix{ zoom:1; width:330px; } 此時父元素的寬度由。clearfix設定的決定，弱國沒有

css中元素居中的幾種方法

ie9 技術 row 也會高度通過寬高內容 ati 對於在網頁端布局，垂直居中難於水平居中，同時實現水平和垂直居中是最難的。在移動端，因為設備的寬高是可變的，故一些方案很難實現。以下使用幾種方案對下面的html去實現居中，如有不足，可以提出寶貴的意見： <di

html高度塌陷以及定位的理解

無法頁面自己 relative n) 布局 posit 如果絕對定位高度塌陷的含義：　父元素的高度，默認被子元素撐開，目前來講box2多高，box1就多高。此時如果子元素設置浮動，則會導致其完全脫離文檔流，子元素脫離文檔流將無法撐開父元素，導致父元素的高度丟失，

WEB學習-CSS中Margin塌陷

margin的塌陷現象標準文件流中，豎直方向的margin不疊加，以較大的為準。　　如果不在標準流，比如盒子都浮動了，那麼兩個盒子之間是沒有塌陷現象的：　　盒子居中margin:0 auto; margin的

python中的字串以及內建方法

字串的操作方法 + 字串連線操作 str1 = "大金鍊子" str2 = "小手錶" str3 = str1 + str2 print(str3) * 字串複製操作 str1 = "大金鍊子" str2 = "小手錶" str3 = str1*3

css中高度設定百分比但是沒有效果

當我們給塊級元素設定響應式高度的時候，例如給div設定height=50%，往往沒能看到效果。原因是百分比的大小是相對其父級元素寬高的大小，如最外層元素設定的百分比是對應螢幕而言的。需要了解的是對於寬度來說，其父級元素無須確定寬度就能設定百分比但高度則不同，若某元素

關於css中文字和盒子居中的方法

目錄文字居中盒子居中文字居中 1.使用text-align與line-height <!DOCTYPE html> <html> <head> <meta charset="utf-8">

html 盒子模型基礎（高度塌陷問題，BFC詳解）（六）

1.高度塌陷問題解決： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css

【詳】JAVA中異常分類以及異常處理方法之間的區別以及聯絡

異常在日長開發中就像看見地鐵裡邊的人頭一樣的，放眼望去，齊刷刷的一片，各種異常。分佈範圍比較廣泛，很多人看到異常，就這表情 JAVA中異常： NullPointerException 空指標異常

CSS中選擇器以及偽類和偽元素選擇器

3.5結構選擇器（1）後代選擇器：可以選擇一個元素的後代元素，這個後代元素包括兒子，孫子，以及後代結構。 <<style type="text/css"> .content a{ font-size: 25px;

淺談CSS中margin的屬性及使用方法

想修改一下子自己的CSS，因為部落格標題正好把網頁圖片上的文字正好檔了一部分，看起來很不爽。最後確實是由“margin命令”來控制的，於是上網學習了一下子這個的用法。margin在中文中我們翻譯成外邊距或者外補白（本文中引用外邊距）。他是元素盒模型（box model）的基礎

清除浮動引起的高度塌陷的7種方法

float會引起高度塌陷問題。觸發條件：子元素全是float元素且父元素沒有設定高度。解決方法：1.給父元素設定高度2.設定一個空標籤，並且給此標籤加上 clear:both;3.<br cl

shell指令碼中使用for迴圈開啟並行方法

大家經常使用for迴圈來給指定指令碼輸入引數，按照引數的輸入順序指令碼順序執行，如以下指令碼：for (( i = 1; i <= 999; i++ )) do sh diaoyong.sh $i done把1-999不停輸入diaoyong.sh指令碼中，該指令碼

CSS中表示cellpadding和cellspacing的方法

本文和大家重點討論一下用CSS來表示表格的cellpadding和cellspacing方法，表格的cellpadding和cellspacing我們經常會用一定的方式來清除預設樣式，請看下文詳細介紹。用CSS來表示表格的cellpadding和cellspacing

CSS 中你應該瞭解的 BFC

我們常說的文件流其實分為定位流、浮動流和普通流三種。而普通流其實就是指BFC中的FC。FC是formatting context的首字母縮寫，直譯過來是格式化上下文，它是頁面中的一塊渲染區域，有一套渲染規則，決定了其子元素如何佈局，以及和其他元素之間的關係和作用。常見的FC有BFC、IFC，還有GFC和FFC

html和css中浮動清除之解決高度塌陷

我們知道網頁的佈局有兩大利器，“浮動”和“定位”。而浮動和定位都不離開div，所以可以清楚理解應用div盒子模型對網頁製作來說及其及其重要。盒子模型：浮動：浮動對應這網頁三大排版中的浮動排版（其他兩個是標準排版、定位排版）（css3中還增加了一些新的排版模型

html+css中margin-top高度坍塌成因及解決方法

margin垂直高度坍塌成因初學html+css時margin-top造成的高度坍塌（這裡暫時稱為坍塌）屬於首類要自己思考查詢資料才能理解的問題，這裡做個記錄。 margin-top坍塌表現為子元素的margin-top數值作用於父元素上，對於佈局產生影響。來理解一些名詞定義：段

父容器div內的子元素div為float時，父元素無法撐開（或高度自適應）的解決方式以及css中position和float的介紹

先簡單給出父元素無法高度自適應時的解決方案：第一種：在父容器上設定 overflow:auto或者hidden可以讓它自動包含子元素，從而具有了實際的height值。第二種：在子元素的最下面加上一個空元素，並且設定clear:both，但

css中的高度塌陷以及開啟BFC的方法

開啟BFC實驗

相關推薦