overflow及父级边框塌陷问题

父级边框塌陷的问题

clear

        /*
        clear：right;    右侧不允许有浮动元素
        clear：left;     左侧不允许有浮动元素
        clear：both;     两侧不允许有浮动元素
        clear：none;
        */

解决方案：

1. 增加父级元素的高度~

#father{
            border: 1px #000 solid;
            height: 800px;
        }

1. 增加一个空的div标签，清除浮动

<div class="clear"></div>

.clear{
            clear: both;
            margin: 0;
            padding: 0;
        }

1. overflow

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

1.父类添加一个伪类：after

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

小结：

1. 浮动元素后面增加空div
   简单，代码中尽量避免空div
2. 设置父元素的高度
   简单，元素假设有了固定的高度，就会被限制
3. overflow
   简单，下拉的一些场景避免使用
4. 父类添加一个伪类：after(推荐)
   写法稍微复杂一点，但是没有副作用，推荐使用！

对比

• display
  方向不可以控制
• float
  浮动起来的话会脱离标准文档流，所以要解决父级边框塌陷问题。