父级边框塌陷问题
解决方案
-
增加父级元素高度
#father{ border：1px solid; height:800px; } -
增加 一个空的div标签 ，清除浮动
<div class="clear"></div> .clear{ clear:both; margin:0; padding:0; } -
overflow
在父级元素中增加一个: overflow:hidden; -
父类添加一个伪类：after
#father:after{ content:''; display:block; clear:both; }
小结：
-
浮动元素后面增加空div
简单 代码中尽量避免空div
-
设置父元素的高度
简单 元素有了高度 就会被限制
-
overflow
简单 下拉的一些场景避免使用
-
父类后面添加一个伪类: after(推荐)
写法稍微复杂一点，但是没有副作用，推荐使用。