浮动
块级元素:独占一行
h1~h6 p div 列表...
行内元素:不独占一行
span a img strong...
行内元素可以被包含中块级元素中。
父级边框塌陷问题
解决方案:
1.增加父级元素的高度
#father{
border:1px #000 soild;
height:800px;
}
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(推荐)