css的float塌陷解决

• 在默认情况下，我们在没有设置外部盒子的高度的高度时，盒子会被盒子里面的内容自动撑开。

<style>
    .wrapper{
        background-color: lightpink;
    }
    .item{
        margin-top: 10px;
        width: 50px;height: 50px;
        background-color: brown;
    }
</style>
<div class="wraper">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

image.png

• 当我们设置子元素浮动后，这个时候父盒子就会出现浮动塌陷，造成父盒子没有高度。

  
  image.png

解决方法

• 1.把父盒子也设置成浮动。这个时候就能看到盒子被撑开了，当然设置浮动后DOM元素自然变成了行内块元素，但是这种方法不是蛮友好。

  
  image.png
• 2.设置hidden，这种方法简单便捷而且也不会改变父元素的盒模型。
  .wrapper{overflow: hidden}
  image.png
• 3.在子元素后面添加一个空的标签，这种办法也不是很友好，浪费了不必要的DOM节点。

<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="item"></div>
<div class="clear"></div>//设置这个元素  clear: both;

• 4.添加伪类after ，这种办法应该是现在主流清除浮动的方法

.wrapper::after {
    content: '';
    display: block; //这里也可以使用 -- display： table
    clear: both; //清除两边的浮动 
    zoom: 1;//兼容IE浏览器
}

• 5.直接设置父盒子固定宽度和高度，也就不会出现浮动塌陷

.wrapper{
  width: 500px;
  height: 100px;
}

• 6.设置父元素为弹性盒模型，display:flex当然这种方法不能兼容到IE10以下，IE10以下不支持弹性盒模型。

.wrapper{
  display: flex;
}

同步更新到我的个人博客曌明博客