display和浮动

display:block; // 块元素
display: inline-block //行内和块元素

 浮动

float: left;

清除浮动

clear: both; 两侧不允许有浮动

 

解决父级元素塌陷问题

1、增加父级元素的高度

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

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

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

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

3、overflow

可以解决溢出的问题

overflow: scroll;  // 溢出部分变为滚动条

overflow: hidden;  //在父级元素中增加一个这个。可以解决塌陷问题。

4、父元素增加一个伪类(推荐使用)

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