HTML5

       概念：指元素根据块元素或行内元素的特性按从上到下，从左到右的方式自然排列。这也是元素默认的排列方式。

标准文档流组成:

          块级元素（block）:       …、

、、列表

         内联元素（inline）:        、、、...

注意：内联标签可以包含于块级标签中，成为它的子元素，而反过来则不成立。

值

说明

block

块级元素的默认值，元素会被显示为块级元素，该元素前后会带有换行符

inline

内联元素的默认值。元素会被显示为内联元素，该元素前后没有换行符

inline-block

行内块元素，元素既具有内联元素的特性，也具有块元素的特性

none

设置元素不会被显示

【显示为块元素，能让行内元素显示宽高，能让行内元素具有块元素的特征】

【显示为行内元素，能让块元素具有行内元素的特征】

【吸取行内元素和块元素共同的特征，既能排在一行，又能显示宽高】

【元素在页面上看不见，隐藏了，但是在源代码中依然存在】

块元素排在一行的方法

可以使用什么属性使块元素排在一行？   1.inline-block           2.float

float属性

设置浮动以后依次浮动之后会跟在前面浮动的元素后面，并且浮动以后层级提高，后面的元素会排上去，浮动元素有可能会盖在未浮动元素的上面

示例：

设置左浮动

依次设置三个图片所在左浮动

设置右浮动

依次设置layer01和layer02右浮动

1. display:inline-block

①可以让元素排在一行，并且支持宽度和高度，代码实现起来方便

②位置方向不可控制，会解析空格

③IE 6、IE 7上不支持

2. float

①可以让元素排在一行并且支持宽度和高度，可以决定排列方向

②float浮动以后元素脱离文档流，会对周围元素产生影响，必须在它的父级上添加清除浮动的样式

边框塌陷

layer04设置宽度和右浮动后，为什么边框塌陷了？

浮动元素脱离标准文档流，父集里面没内容了就剩下了最上面的一个框

怎么解决？

           清除浮动

clear属性

示例：

清除左浮动：

清除右浮动：

清除两测浮动

弊端：太多空元素会造成阅读困难

弊端：高度不可控，不灵活

优缺点：很完美，但是属性太多；不好分别。

overflow属性

scroll和auto的区别是在使用auto时，横向如果不需要滚动滚动条就会消失

优点：目前最好的方法，企业里都这么用