5.浮动

5.1标准文件流

块级元素:独占一行

h1---h6   p   div    列表

行内元素:不独占一行

span   a    img  strong

 

行内元素可以被包含在块级元素中，反之，不可以。

5.2 display

display:inline 行内元素
display:block 块元素
display:inline-block 既属于块元素又属于行元素---是块元素，但是可以内联在一行
是一种实现行内元素排列的方式，但更多情况都是用float。

 5.3 float:浮于上方。

float:left

float:right 

5.4父级边框塌陷的问题

　　  clear:right 右侧不允许有浮动元素。

　　  clear:left 左侧不允许有浮动元素。

　　  clear:both 左右两侧不允许有浮动元素

　　  clear:none

         1.将父级块元素的长宽确定下来。　　

　　  2.在后面增加一个空的div,清除浮动(clear:both)+空div的margin和padding都置为0

　　  3.在父级元素中增加overflow:hidden/scroll  超出边缘的部分隐藏或者有滚轮。

　　  常用:4.父类添加一个伪类: after                #father:after{content:’‘; display:block; clear:both;}

5.5对比

display:方向不可控制，但是不会脱离标准文档流。

float:可以控制方向，但是浮动起来会脱离标准文档流，需要解决父级边框塌陷问题。