css学习的第八天-解决浮动后父级边框坍塌问题

解决使用float浮动后出现的父级边框坍塌问题
1.增加父级高度
    eg：#father{height:1000px}
2.在浮动效果下方增加一个空div，并且将清除div两侧的浮动效果
    eg:
    <div style:"float:left">浮动的内容</div>
    <div style:"clear:both"></div>
注：clear：left（清除左侧浮动效果）、right（清除右侧浮动效果）、both（清除两侧浮动效果）、none（不清除浮动效果）
3.overflow设置为hidden，通过设置下拉属性实现，避免使用
    eg：#father{overflow:hidden}
注：overflow：hidden（隐藏高度外的部分，相当于裁剪）、scroll（隐藏高度外的部分，并且出现滚动条）
4.设置伪类（推荐方法）,首先添加:after伪类,其次设置其content:''(即内容为空),接着将该伪类设置为块级元素display:block,最后清除两侧浮动效果clear:both
    eg: #father:after{content:'';display:block;clear:both;}

注：
    使用display可以排列行内元素，但是不能控制方向;
    使用float也可以排列行内元素，并且可以控制方向，但是会出现父级边框塌陷的问题