CSS叠层样式列表、浮动与float的包裹与清除

一、CSS叠层样式列表
（一）概念：Cascading Style Sheet。层叠样式列表。不仅可以修饰网页，也可以配合各种脚本语言动态对网页各种元素进行格式化。
（二）样式分类：
1.内部样式：直接在标签中编写。
2.外部样式：使用标签进行外部链接。
3行内样式：在标签内部编写。
（三） css常用样式：
1.颜色设置：颜色设置color单词，16进制，rgb.
2.文本样式：对齐方式、文本修饰、文本转换、文本缩进、
属性：
1.color：表示颜色内容，设置文本颜色。
2.direction:ltr/rtl 文本的方向/书写方向。
3.letter-spacing: npxl，n可以是负数，字符间距。
4.line-height: npx ,行高（行间距）
5.text-align: left/right/center/justify 两端对齐方式。
direction:ltr与text-align:justify区别：
1.如果是字母和汉字，两者效果一样。
2.主要针对阿拉伯数字，两者不同。
3.direction：对于数字改变书写顺序，对于小数点显示也不同。
（四）文本修饰：
1 text-decoration:none/underline/overline/line-through 下划线
2 text-shadow:h-shadow/v-shadow/blur color 文本设置阴影。
3. text-transform:none/capitalize/upperacase/lowercase改变字母大小。
4. text-indent：npx/nem(em表示字符单位)，首行缩进。
（五）字体样式：
定义文本的字体系列。
1.font-family:设置字体，例如隶书、楷体、黑体等字体。
5. font-style：normal/italic/obligue 规定斜体的文本。
6. font-weight:normal/bold/100-900 (100-300变化一点，600显得粗一些，之后都一样) 文本加粗。
7. font-size:npx,字体大小。
（六）列表样式：
1 list-style-type:none/disc/circle/square/decimal……设置项目列表的外观。
8. list-style-position: inside/outside 列表符号的位置。
9. ist-style-image:URL/none 把图片设置为列表项目的标记。
10. ist-style：同前三，简写属性，涵盖以上三个样式属性。

二、CSS浮动
浮动float属性设置：
1 left 元素向左浮动。
2. right 元素向右浮动。
3.none 默认值，不浮动。

三、float的包裹特性和奔溃特性
(一)奔溃：float作为父级元素的时候，父级元素的高度发生了奔溃。在没有设置宽度之前，宽度是上一级父元素的宽度（沾满一整行），高度随内容而被撑开，设定宽度。

由于div1（父元素）没有设置宽高，div2和div3分别设置了宽高，导致父元素崩溃。效果图：

（二）包裹
包裹特性：
1、 比如商品列表的并排显示
2、 文字和div进行环绕排列的方式

四、清除浮动
1、 为了父元素不再出现奔溃效果
2、 如果强制规定外层容器的尺寸，就不那么灵活，高度就不能自适应了
3、.从某个元素开始不再需要浮动效果了
清除浮动用clear


专业清除浮动：cleardiv。after需要配合concent使用，内容可以为空，是行内元素。display:inlineblock 可以将行内元素设置成块状元素。
zoom:1，IE浏览器专用，解决外边距的重叠，浮动不能清除。