html/css系列 BFC

時間 2019-12-05

標籤 html css 系列 bfc 欄目 HTML 简体版

原文原文鏈接

本文詳情:https://www.cnblogs.com/chen-...html

第一種 BFC中的盒子對齊spa

<div class="container">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
    </div>

div {
                height: 20px;
        }
            
        .container {
            position: absolute;  /* 建立一個BFC環境*/
            height: auto;
            background-color: #eee;
        }
        
        .box1 {
            width: 400px;
            background-color: red;
        }
        
        .box2 {
            width: 300px;
            background-color: green;
        }
        
        .box3 {
            width: 100px;
            background-color: yellow;
            float: left;
        }
        
        .box4 {
            width: 200px;
            height: 30px;
            background-color: purple;
        }

第二種外邊距摺疊垂直方向上的距離由margin決定code

<div class="container">
        <div class="box"></div>
        <div class="box"></div>
    </div>

.container {
            overflow: hidden;
            width: 100px;
            height: 100px;
            background-color: red;
        }
        
        .box1 {
            height: 20px;
            margin: 10px 0;
            background-color: green;
        }
        
        .box2 {
            height: 20px;
            margin: 20px 0;
            background-color: green;
        }

上下DIV同時margin 形成重疊htm

第二種BFC,由於浮動形成盒子對齊解決方法相隔的DIV換成P標籤blog

第三種DBC 左邊浮動右邊自適應ip

第四種DFC 文字環繞解決方法verflow:hidden清除浮動get