css03

浮动

标签显示模式转换与特点

元素三大特点
块级标签
每个块标签通常都会独自占据一行，可以对其设置宽高、高度、对其等属性，常用于网页布局和网页结构的搭建
常见的块标签有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>最典型的块标签。
块级标签的特点
·总是从新行开始
·高度、行高、外边距以及内边距都可以控制。
·宽度默认是容器的100%
·可以容纳内联标签和其他块标签

行内标签
不占有独立的区域，仅仅靠 自身的字体大小和图像尺寸来支撑结构，一般不可以设置宽高，对齐方式。
常见行内标签<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中span标签是最典型的的行内标签

行内标签特点

·和相邻行内标签在一行
·宽高无效，但水平方向可设置
·默认宽度是内容的本身
·行内标签只能容纳文本或其他行内标签（a标签里面可以放块级标签）

行内块标签

在行内块标签有几个特殊的标签—<img>、<input>、<td>
可以设置宽高和对齐方式
行内块特点
·和相邻行内块标签在一行上，但是之间会有空隙
·默认宽度就是内容的宽度
·高度，行高、外边距以及内边距都可以控制

标签显示模式转换

display：
inline 行内标签
block 块级标签
inline-block 行内块标签

其他常用属性
list-style 列表样式，涵盖了所有其他列表样式属性。
list-style-type
可能的值：

none	无标记。
disc	默认。标记是实心圆。
circle	标记是空心圆。
square	标记是实心方块。
decimal	标记是数字。
decimal-leading-zero	0开头的数字标记。(01, 02, 03, 等。)
lower-roman	小写罗马数字(i, ii, iii, iv, v, 等。)
upper-roman	大写罗马数字(I, II, III, IV, V, 等。)
lower-alpha	小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
upper-alpha	大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
lower-greek	小写希腊字母(alpha, beta, gamma, 等。)
lower-latin	小写拉丁字母(a, b, c, d, e, 等。)
upper-latin	大写拉丁字母(A, B, C, D, E, 等。)
hebrew	传统的希伯来编号方式
armenian	传统的亚美尼亚编号方式
georgian	传统的乔治亚编号方式(an, ban, gan, 等。)
cjk-ideographic	简单的表意数字
hiragana	标记是：a, i, u, e, o, ka, ki, 等。（日文片假名）
katakana	标记是：A, I, U, E, O, KA, KI, 等。（日文片假名）
hiragana-iroha	标记是：i, ro, ha, ni, ho, he, to, 等。（日文片假名）
katakana-iroha	标记是：I, RO, HA, NI, HO, HE, TO, 等。（日文片假名）

list-style-position 属性设置在何处放置列表项标记。
可能的值：

inside	列表项目标记放置在文本以内，且环绕文本根据标记对齐。
outside	默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。
inherit	规定应该从父元素继承 list-style-position 属性的值。

overflow 属性规定当内容溢出元素框时发生的事情
可能的值

visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

vertical-align
vertical-align 属性设置元素的垂直对齐方式。
可能的值：

baseline	默认。元素放置在父元素的基线上。
sub	垂直对齐文本的下标。
super	垂直对齐文本的上标
top	把元素的顶端与行中最高元素的顶端对齐
text-top	把元素的顶端与父元素字体的顶端对齐
middle	把此元素放置在父元素的中部。
bottom	把元素的顶端与行中最低的元素的顶端对齐。
text-bottom	把元素的底端与父元素字体的底端对齐。
length	 
%	使用 "line-height" 属性的百分比值来排列此元素。允许使用负值。
inherit	规定应该从父元素继承 vertical-align 属性的值。

浮动

可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。
如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。
注释：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。

可能的值

left	元素向左浮动。
right	元素向右浮动。
none	默认值。元素不浮动，并会显示在其在文本中出现的位置。
inherit	规定应该从父元素继承 float 属性的值。

常见清除浮动的方法
·1 给浮动标签的父标签固定高度（不够灵活）
·2 在浮动标签的最后一个空加div，标签本身不浮动，且添加样式clear: both;(代码冗杂)
·3 给父标签加overflow属性，overflow值为visible以外的其他值时可以帮助实现
·4 推荐方法，给浮动标签的父标签添加.clearfix

.clearfix {
			*zoom: 1;           处理ie以下的兼容
}
.clearfix:after {
			content:'';
			clear: both;
			display: block;
}