标签特性 浮动（float）

一、标签的特性

1. 块级元素
   块级元素会独立成行；
   块级元素的宽度默认撑满欺父元素的宽度；
   具有盒模型的特征（默认可以设置：宽度 高度 间距 留白 边框）；
   块级元素中可以添加块级元素，行级元素， 行块元素，
   常见的块级元素： div， p， h1， h2， h3…， ul ，ol， li ，dl， dt ，dd等
2. 行级元素
   不会独占一行，宽度随缘素内容变化，相邻的行内元素会排列在同一行，知道一行排不下，才会换行；
   具有部分盒模型特征（没有宽高，没有横向间距 margin-right 、margin-left、有留白（填充）， padding-left、padding-right 没有纵向 ，margin-top margin-bottom和留白 ，padding-top padding-bottom 边框保留；）
   换行和空格会被解析（只会解析出一个）；
   常见的行级元素： span ，strong，b，i，em，a等
3. 行块元素
   img 标签默认在同一行显示可以设置width ，height。
   具有块级标记的特征：可以设置宽高，留白（填充） 外间距，
   具有行级标记的特征：默认横向显示知道一行排不下才会换行，换行和空格会被解析（只会解析一个）；
4. 框模型转换 ：display
   display：none；隐藏元素；
   display：block；用于隐藏元素的显示转换成块级元素；
   display：inline；转换成行级元素；
   display：inline-block；转换成行块元素；

二、属性

1. list-style
   list-style-tyle属性：设置列表符的样式；
   list-style-position属性：设置列表符的位置；
   list-style-image属性；设置列表符（图片）；
2. overflow：内容溢出元素的溢出处理方式；
   overflow：visible；默认值，正常显示；
   overflow：hidden；溢出隐藏；
   overflow：scroll；溢出显示滚动条（横向和纵向）；
   overflow：auto；自动，内容溢出是显示滚动条；
3. vertical-align：设置幻速的垂直对齐方式；
   vertical-align：top；元素的顶端对齐
   vertical-align：middle；中间对齐；
   vertival-align：bottom；底端对齐；
   vertical-align ： baseline 基线对齐；
   vertical-align：sub；下标 类似于< sub>< /sub>
   vertical-align：super；上标 类似于< sup>< /sup>

三、浮动

1. 文档流：是文档中可以显示得对象，在排列是所占的位置；
   css的float ，会使元素向左向右移动，其周围的元素也会重新排列即脱离正常文档流；
   浮动能使元素脱离正常文旦刘按照指定的方向发生移动，知道他的外边袁鹏都爱父级盒边界或另一个浮动的边框位置；
   注意：浮动只能是元素在水平方向移动，而不能再垂直方向移动；

2. 属性
   float:left;向左浮动；
   float：right;向右浮动；
   float：none；不浮动（默认值）；

3. 特性
   浮动可以使块级元素在一行排列（要做水平布局的每一个盒子都要浮 动，浮动元素是并列关系）；
   浮动会使元素脱离正常流；
   浮动元素层级会提升；
   浮动可以使行级元素支持宽高；
   元素浮动之后，不占位，父级盒元素高度为0；
   浮动可以使块级元素内容撑开（高度自适应）；

4. 浮动问题
   元素添加浮动后，父元素的高度为0，影响后续页面布局问题；

5. 清浮动的方法
   （1）. 给父东原宿的父级盒家固定高度，（闭合浮动）——不够灵活；
   （2）.为浮动元素的父级盒家overflow：hidden；——可能会倒是内容显示不完全；
   （3）.在浮动元素后面添加一个空的div元素与浮动元素呈并列关系，在空div元素上加 style= clear：both；——代码冗余；
   （4）.给浮动元素的父级盒加类名 clearfix ：

   		clearfix{*zoom：1;}
   		clearfix::after{ 
   		    		content:"";
   		    		display:block;
   		    		clear:both;
   		    		}
   	不会在结构中产生冗余代码，可以重复使用;