015解决父级边框塌陷问题

解决方案:

1、增加父级元素的高度

      

#father{
    border: 1px #000 soild;
    height:500px;
}

 

2、增加一个空的div标签,清除浮动

      

<div class="clear"></div>
.clear{
    clear:both;
    margin: 0;
    padding: 0;
}

 

3、overflow

      

在父级元素中增加一个  overflow: hidden;

 

4、父类添加一个伪类: after

      

#father:after{
    content: '';
    display: block;
    clear: both;
}

 

小结:

  1. 浮动元素后面增加空div

    增加,代码中尽量避免空div

  2. 设置父元素的高度

    简单,元素假设有了固定的高度,就会被限制

  3. overflow

    简单,下拉的一些场景避免使用

  4. 父类添加一个伪类:after(推荐)

    写法稍微复杂一点,但是没有副作用,推荐使用!

上一篇:工厂模式之工厂方法模式


下一篇:015、文件上传操作 (input标签文件上传)