浮动（display/父级边框塌陷的处理办法）

第七章

一、浮动

float

left 左浮动
right 右浮动

二、display

block 转化为块级元素

inline 转化为行内元素

inline-block 既有块级特性，又有行内特性

none 不显示。可以左下拉列表框 (:hover)

一般不使用display 因为使用之后相邻之间会有间距，无法消除

三、父级边框塌陷的处理办法

一、父元素后加空div

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

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

会造成代码冗余

二、设置父级div高度

<div  class="father">
    
</div>
.father{
height="1000px"
}
会导致高度固定，无法添加新元素

三、清除浮动

clear

四、父级添加伪类after(最好用)

.clear:after{
    content: '';          /*在clear类后面添加内容为空*/
    display: block;      /*把添加的内容转化为块元素*/
    clear: both;         /*清除这个元素两边的浮动*/
}
跟添加空div原理相同