CSS属性(3)-浮动定位

现因为用overflow：hidden超出的部分会被隐藏，父元素高度也不用写死，我们
只要在页面写一次清浮动的代码，在需要清浮动的位置加个clearfix类名就可以了。
定位属性
• position: static; 默认值。 • 无定位，在HTML文档流中默认的位置。
• position: absolute;(表示绝对定位) • 这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、
定位的特性
1、行内元素添加了绝对定位可以直接给高和宽不用转换
2、块元素添加了绝对定位，如果没有指定宽度，会自动收缩到内容的宽度。
3、绝对定位的盒子不受父盒子padding的影响。
4、父元素有绝对定位，可以不需要清除浮动
堆叠属性
z-index:规定元素的堆叠顺序 • 拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。 • 元素可拥有负的 z-index 属性值 • z-index的默认属性值是0 • 仅能在定位元素上奏效（relative,fixed,absolute)
bottom属性相对于其最接近的一个具有定位属性的祖先元素进行绝对
定位。如果不存在这样的元素，则相对于body元素。
定位属性
• position: relative;（表示相对定位）
• 相对于它在正常文档流的位置进行定位。
• 它通过left、right、top、bottom属性确定元素在正常文档流中的偏移 位置
• 该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示
区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。
定位使用的范围
层布局模型（定位）就像是图像软件PhotoShop中非常流行的图层编辑功 能一样，每个图层能够精确定位操作，但在网页设计领域，由于网页大小 的活动性，层布局没能受到热捧。但是在网页上局部使用层布局还是有其
也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。 块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块 状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置（占整行）。 在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。（一行放多个）
overflow:scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
overflow:auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
注意： 利用overflow：hidden清除浮动时，父元素里面不能有定位超出的元素，如果有，超出 的部分会被隐藏。
第四节 CSS属性（3）
css布局模型
布局模型与盒模型一样都是 CSS 最基本、 最核心的概念,但布局模型是建 立在盒模型基础之上。
CSS包含3种基本的布局模型：
• 流动模型（w） • 浮动模型 (Float)
• 层模型（Layer）：定位
流动模型
流动模型是默认的网页布局模式。
• 子元素都浮动，父元素的高度如果没有设置值，则出现撑不开的现象，清除浮动可以 解决
清除浮动
特例： 1、父元素有浮动不需要清除浮动 2、父元素有绝对定位不需要清除浮动
清除浮动
方法1：定高法
给浮动元素的父元素设置高度大于或等于最高的浮动元素的高度。 用于小版块，高度可以写死的部分。
浮动
float：属性定义元素在哪个方向浮动
float:left; float:right; float:none;/*默认值。元素不浮动，并会显示在其在文本中出现的位置*/
注意：
1、任何元素都可以浮动
2、一个盒子里面有一个元素浮动，其他的都得浮动。
浮动的特性
1、浮动元素会去找离它最近的有浮动的元素的边贴。 2、假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行 3、右浮动会颠倒盒子顺序
• position: fixed; （表示固定定位） • 相对于浏览器窗口进行定位。 • 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
定位的使用
绝对定位的元素完全脱离标准流（在文档流中不占位置）。 它完全漂浮在 标准流的上方。 相对定位在文档流中是占有位置的。 不管怎么移动，原来的位置保留。 根据这个特点，我们一般这样使用： 子元素绝对定位，父元素相对定位。
清除浮动
方法4：利用after伪元素清除浮动
清除浮动
visibility:规定元素是否可见 visibility:visible； 默认值，元素是可见的 visibility:hidden ； 元素是不可见的
注意： 做项目时我们常用after伪元素清除浮动，因为它不会额外增加标签，而且不会出
4、行内显示模式的标签加了浮动后，可以直接设置宽高，无需转换。
5、块显示模式的元素，如果没有设置宽度，添加了浮动后，会收缩到内容的大小。 6、浮动元素会脱离文档流，会压住下一个块元素，但不会压住其内容。
清除浮动
clear：规定元素的哪一侧不允许其他浮动元素 clear:both;/*在左右两侧均不允许浮动元素*/ 注意事项：
方便之处的。
页面布局的时候，我们用浮动。局部定位的时候用定位。
不要滥用定位！
方法2：额外标签法
清除浮动
方法3：给浮动元素的父元素添加overflow：hidden
Overflow属性
overflow:规定当内容溢出元素框时发生的事情 overflow:visible 默认值。内容不会被修剪，会呈现在元素框之外。 overflow:hidden 内容会被修剪，并且其余内容是不可见的。