随笔- 54 文章- 0 评论- 0 阅读- 1274

高度塌陷（开启BFC）

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>高度塌陷</title>
        <style type="text/css">
            .box {
                border: 1px solid red;
                /* 
                 BFC无法直接开启，需要通过一些属性来开启BFC
                     1.设置元素浮动可以开启BFC
                     2.将元素设置为行内块元素
                     3.可以将元素的overflow设置为一个非visible的值
                     
                 通过overflow: hidden来开启BFC，从而解决高度塌陷的问题
                 */
                overflow: hidden;
            }

            .box1 {
                width: 100px;
                height: 100px;
                background-color: #bfa;
                float: left;
                /* 
                    高度塌陷
                        块元素的高度默认情况下是被子元素撑开的，如果子元素浮动，将会完全脱离文档流，脱离文档流
                            子元素无法撑起子元素高度，将会导致父元素高度丢失，父元素一旦丢失页面则其他元素也会移动
                            导致布局混乱
                            
                    
                    BFC（Block Format Content）
                        块级格式化环境
                        BFC是元素的一个隐藏属性，一旦元素开启了BFC它将会开启一个独立的布局区域
                        这个布局区域将会具有一些特殊性质
                            1.开启了BFC的元素子元素的垂直外边距不会传递给父元素
                            2.开启了BFC的元素不会被浮动的元素所覆盖
                            3.开启了BFC的元素可以包含浮动的子元素
                        
                        
                    
                 */

            }

            .box2 {
                width: 300px;
                height: 200px;
                background-color: orange;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <div class="box1"></div>
        </div>
        <div class="box2"></div>
    </body>
</html>