浮动塌陷和margin塌陷

浮动塌陷

使用float浮动的时候，父元素的高度变成0。

效果如下：

image.png

ul没有定义高度，继承了li的高度，但是浮动会导致ul的高度为0，因此下面的盒子就自动上去了。

解决方案

• 给父元素设置高度

ul{
  hieght:200px
}

• 给父元素加一个没用的子元素 给这个子元素设置清除浮动的属性clear;both

• 给父元素设置overflow溢出隐藏

ul{
  overflow:hidden;
}

• 使用after伪类选择器 ：

ul:after{ 
   content:'';
   clear:both; 
   display:block;   
   visibility:hidden; 
}

效果图

image.png

margin塌陷

发生在两个盒子嵌套的时候，父盒子和子盒子同时设置margin的时候会出现实际的magin取的是两个margin的最大值

image.png

此时父盒子上边距是两者中的最大值也就是150px，而盒子没有撑开父盒子，绿色的子元素设置的margin失效了

解决方案

• 给父元素一个边框border（如果你要边框就给个边框，不需要边框就给一个透明色的边框）

      .father{
            margin-top:150px;
            width: 500px;
            height: 200px;
            background-color: green;
            border: 1px solid rgba(0, 0, 0, 0);
            box-sizing: border-box;
        }

      .son{
            margin-top: 70px;
            width: 200px;
            height: 500px;
            background-color: red;
        }

• 给父元素增加

overflow: hidden

• 给父元素设置

display：fixed;

• 给父元素添加

display: table;

• 给子元素的前面添加一个兄弟元素属性为:

content:'';
overflow:hidden;

效果图

image.png