HTML的display属性与float属性

display：

定义：display属性用于规定元素生成的框类型，影响显示方式。（块级元素与内联元素的转变）

块级元素：独占一行，设置宽高  有h标签、p标签、div标签

内联元素：宽高不能设置，由内容决定。有span标签、b标签、a标签、input标签、img标签

常见的属性值：none ：隐藏元素并脱离文档流（文档流就是文档的排列方式，在同一个平面中从上到下，从左到右）。

　　　　          inline ：挨个放，没有宽高，有东西就占据空间，没有东西就不占据空间。（块级元素转变成内联元素）

　　　　          block ：独自占据一行，有自己的宽高。（内联元素转变成块级元素）

　　　　          inline-block：有东西占据空间，独自占据一行，可以自己设置宽高

不常见的还有：list-item、run-in 、 table 、inline-table 、 table-row-group 、 table-header-group 、 table-footer-group 、 table-row 、 table-colume-group 、 table-column 、 table-cell 、 table-caption 、 inherit

float：

定义：浮动就是取消标准流的格式，让块级元素可以在同一行中显示。（标准流就是指在html中标签元素按照默认方式排列下的布局）。

四个属性值：left:    向左浮动

　　　　　　right：向右浮动

                    none：不浮动（就是标准流）

                    inherit：继承父元素的浮动属性（不常见）

特点：①脱离标准流，浮起来，不占位置。

　　   ②显示方式类似于行内块元素，可以设置宽高，块级元素可以在一行显示。

          ③浮动的元素不能撑开盒子（给浮动的元素加一个父盒子，在父盒子没有高度的时候，内容多高，父盒子就有多高）。

         ④浮动只会影响后面的元素而不会影响前面的元素。

缺点：浮动会漂浮于普通流之上，像浮云一样，但是只能左右浮动，正因为这种特性，会导致框内部由于不存在其他元素而表现出高度为0（出现高度坍塌）。

清除浮动：①overflow:hidden（加到父元素）

　　　　   ②clear：both  （写到浮动元素的后面）