css高度塌陷问题

目录

高度塌陷

高度塌陷解决方案二：

解决高度塌陷方案三：

解决高度塌陷方案四：

---

高度塌陷

一般情况，我们的父元素是不设置高度的，让其被内容自动撑开，如果子元素设置浮动了，
子元素会脱离文档流，就不能再撑开父元素的高度，从而导致父元素的高度丢失，导致页面布局的混乱
这就是高度塌陷问题，这个问题也必须要解决
   解决高度塌陷
      方案一：给父元素设置固定高度,但不推荐使用
      方案二：给元素开启BFC
      方案三：结合clear样式，解决高度塌陷
      方案四：结合clear、伪类，解决高度塌陷

1、什么是BFC(Block Formatting Context) 块级格式化上下文  ，元素的隐含属性
     开启BFC后，就相当于把元素单独隔离，成为一个独立的区块，不影响页面的其他元素 
     2、开启BFC后，元素有什么特点
       （1）、父元素的垂直外边距就不会跟子元素垂直外边距重叠了（可以解决父子外边距重叠的问题）
       （2）、开启BFC的元素不会被浮动元素覆盖
       （3）、开启BFC的元素可以包裹住浮动的元素（也就是可以解决高度塌陷问题）    
     3、如何开启BFC
        （1）、设置元素浮动
            虽然可以解决高度塌陷，但宽度丢失，而且页面布局混乱的问题也没有解决
        （2）、将元素转成行内块元素
            也可以解决高度塌陷，但宽度丢失，而且会带来三像素问题，也一定程度上影响页面的布局
        （3）、利用overflow样式，非visible默认值   可以是auto、hidden、scroll
            可以解决高度塌陷问题，最大程度不影响页面的布局，副作用相对较小，建议使用
        （4）、设置绝对定位（暂时未讲到）
          虽然可以解决高度塌陷，但宽度丢失，而且页面布局混乱的问题也没有解决

高度塌陷解决方案二：

页面元素中的隐含属性：Block Formatting Context 即块格式化上下文，简称BFC
 当开启元素的BFC以后，元素会变成一个独立的布局区域，不会在布局上影响到外面的元素
BFC 理解为一个封闭的大箱子，箱子内部的元素不会影响到外部。

开启BFC后，元素将会具有如下的特性：
1.父元素的垂直外边距不会和子元素重叠    
2.开启BFC的元素不会被浮动元素所覆盖
3.开启BFC的元素可以包含浮动的子元素（可解决高度塌陷）
            
如何开启元素的BFC
1.设置元素浮动（不推荐）
- 使用这种方式开启，虽然可以撑开父元素，但是会导致父元素的宽度丢失
而且使用这种方式也会导致下边的元素上移，不能解决问题
2.设置元素为inline-block（不推荐）
- 可以解决问题，但是会导致宽度丢失，不推荐使用这种方式
3.将元素的overflow设置为一个非visible的值 
4.设置元素绝对定位(暂时没学习)
元素也会脱离文档流，虽然可以撑开父元素，但是会导致父元素的宽度丢失
而且使用这种方式也会导致下边的元素上移，不能解决问题
                                
推荐方式：将overflow设置为hidden是副作用最小的开启BFC的方式。

我们有时希望清除掉其他元素浮动对当前元素产生的影响，这时可以使用clear来完成功能
clear可以用来清除其他浮动元素对当前元素的影响
可选值：
none，默认值，不清除浮动
left，清除左侧浮动元素对当前元素的影响
right，清除右侧浮动元素对当前元素的影响
both，清除两侧浮动元素对当前元素的影响
清除对他影响最大的那个元素的浮动

解决高度塌陷方案三：

可以直接在高度塌陷的父元素的最后，添加一个块元素（div），
由于这个div并没有浮动，所以他是可以撑开父元素的高度的，
然后在对其进行清除浮动，这样可以通过这个空白的div来撑开父元素的高度，
基本没有副作用

<div style="clear: both;"></div>

              
使用这种方式虽然可以解决问题，但是会在页面中添加多余的结构。

解决高度塌陷方案四：

可以通过after伪类向父元素的最后添加一个空白的块元素，然后对其清除浮动，
    这样做和添加一个div的原理一样，可以达到一个相同的效果，
    而且不会在页面中添加多余的div，这是我们最推荐使用的方式，几乎没有副作用
 

  .box1::after{
        /* 添加一个内容 */
        content: '';
        /* 将内容转成块元素或表格 */
        display: table;
        /* 清楚两侧浮动带来的影响 */
        clear: both;
      }

解决父子元素的外边距重叠方法

  display:table可以将一个元素设置为表格显示
 

.box1::before{
         content: '';
         display: table;
       } 

整合两种写法，可以同时解决父子外边距重叠的问题,高度塌陷的问题

    

 .clearfix::before,
      .clearfix::after {
        /* 添加内容 */
        content: "";
        /* 将内容转成表格 */
        display: table;
        /* 清除两侧浮动带来的影响 */
        clear: both;
      }