为什么会高度塌陷

• 当父元素不设置‘height’属性时，向其中添加子元素，父元素会拥有子元素的高度

• 但是当其中的子元素添加’float‘属性时，子元素会脱离文档流，父元素会失去支撑其的高度，也就是所谓的 ‘高度塌陷’

    <style>
        #a{
            width:100px;
            height:100px;
            background-color: aqua;
            float:left;
        }
    </style>
    <div style='border:1px solid red;margin:100px;'>
        <div id="a"></div>
    </div>

如何解决高度塌陷

设置父元素高度

• 这种方式比较简单直接，但是需要确定父元素准确的高度，并且后期不会更改

设置clear属性

为什么要用clear:both

• clear有四个主属性值：‘none（默认无）’，‘left（左侧无浮动）’，‘right（右侧无浮动）’，‘both（两侧无浮动）’
• ’clear‘有一个规则，那就是只作用于当前元素的前一个兄弟元素，而前一个元素只会存在于当前元素的左边或者右边，无论那一边，’clear:both‘都能完美的替代

如何使用

• 我们可以创建一个标签，赋予‘clear:both;’属性

   <style>
        #a{
            width:100px;
            height:100px;
            background-color: aqua;
            float:left;
        }
        p{
            clear:both;
        }
    </style>
    <div style='border:1px solid red;margin:100px;'>
        <div id="a"></div>
        <p></p>
    </div>

优化

• 如上图所示，新建一个标签的却可以解决这个问题，但每次都要新建一个标签非常的消耗资源，那能不能优化一下呢？
• 我们可以使用:after伪元素和content属性来模拟新建一个盒子，然后给予他clear:both;属性，如下图

        <style>
        #a{
            width:100px;
            height:100px;
            background-color: aqua;
            float:left;
        }
        .clearfix:after{
            display:block;
            content:"";
            clear:both;
        }
    </style>
    <div class='clearfix' style='border:1px solid red;margin:100px;'>
        <div id="a" ></div>
    </div>

注：不能给子元素本身添加，:after伪元素会添加到标签内的最后

开启BFC模式

什么是BFC

• BFC全称为’Block formatting context‘直译为’块级格式化上下文‘，我个人将它理解为一种开关，通过某种方式打开后来解决某些问题，这里我主要用来解决高度塌陷的问题
• 开启后，父元素高度不受子元素脱离文档流的影响
  注：IE7以下不支持BFC模式，但同样含有一个隐藏属性 --- ‘haslayout’，可以通过‘zoom:1;’来开启

如何开启BFC

• overflow设为hidden、scroll、auto
• float值不为none
• display设为inline-block、tabole-cell、table-caption
• position不为relative、static

个人比较推荐修改‘overflow’属性的方法，因为相比于起来方式来说，‘overflow’对页面的影响更小

    <div style='overflow: hidden;border:1px solid red;margin:100px;'>
        <div id="a" ></div>
    </div>

借鉴：《CSS世界》 + 网上查找 + 自己的理解
如有错误，希望提出

希望大家都能早日拿到心仪的offer，加油，共勉