CSS display属性和浮动属性以及浮动规则、清除浮动

定义和用法
display 属性规定元素应该生成的框的类型。

说明
这个属性用于定义建立布局时元素生成的显示框类型。对于 HTML 等文档类型，如果使用 display 不谨慎会很危险，因为可能违反 HTML 中已经定义的显示层次结构。对于 XML，由于 XML 没有内置的这种层次结构，所有 display 是绝对必要的。

注释：CSS2 中有值 compact 和 marker，不过由于缺乏广泛的支持，已经从 CSS2.1 中去除了。

浏览器支持
所有主流浏览器都支持 display 属性。

注释：如果规定了 !DOCTYPE，则 Internet Explorer 8 （以及更高版本）支持属性值 “inline-table”、“run-in”、“table”、“table-caption”、“table-cell”、“table-column”、“table-column-group”、“table-row”、“table-row-group”、以及 “inherit”。

可能的值

CSS 浮动
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
试举三例：
浮动属性可能的值：

清除浮动之前预习听课内容：
上下排列：clear属性，表示清除浮动的，left、right、both
嵌套排列：
固定宽高 : 不推荐 , 不能把高度固定死，不适合做自适应的效果。
父元素浮动 : 不推荐 , 因为父容器浮动也会影响到后面的元素。
overflow : hidden (BFC规范) , 如果有子元素想溢出，那么会受到影响。
display : inline-block (BFC规范)，不推荐，父容器会影响到后面的元素。
设置空标签 : 不推荐 , 会多添加一个标签。
after伪类 : 推荐，是空标签的加强版，目前各大公司的做法。
( clear属性只会操作块标签，对内联标签不起作用 )