CSS属性(3)-浮动定位

1、第四节第四节 CSS属性（属性（3）css布局模型布局模型与盒模型一样都是 CSS 最基本、 最核心的概念,但布局模型是建立在盒模型基础之上。CSS包含3种基本的布局模型：流动模型（Flow）浮动模型 (Float)层模型（Layer）：定位流动模型 流动模型是默认的网页布局模式。 也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的。 块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布，因为在默认状态下，块状元素的宽度都为100%。实际上，块状元素都会以行的形式占据位置（占整行）。 在流动模型下，内联元素都会在所处的包含元素内从左到右水平分布显示。（一行放多个

2、）浮动float：属性定义元素在哪个方向浮动 float:left; float:right; float:none;/*默认值。元素不浮动，并会显示在其在文本中出现的位置*/注意： 1、任何元素都可以浮动 2、一个盒子里面有一个元素浮动，其他的都得浮动。浮动的浮动的特性特性 1、浮动元素会去找离它最近的有浮动的元素的边贴。 2、假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行 3、右浮动会颠倒盒子顺序 4、行内显示模式的标签加了浮动后，可以直接设置宽高，无需转换。 5、块显示模式的元素，如果没有设置宽度，添加了浮动后，会收缩到内容的大小。 6、浮动元素会脱离文档流，会压住下

3、一个块元素，但不会压住其内容。清除浮动clear：规定元素的哪一侧不允许其他浮动元素clear:both;/*在左右两侧均不允许浮动元素*/ 注意事项：子元素都浮动，父元素的高度如果没有设置值，则出现撑不开的现象，清除浮动可以解决清除浮动特例：1、父元素有浮动不需要清除浮动2、父元素有绝对定位不需要清除浮动清除浮动方法1：定高法 给浮动元素的父元素设置高度大于或等于最高的浮动元素的高度。 用于小版块，高度可以写死的部分。方法2：额外标签法清除浮动方法3：给浮动元素的父元素添加overflow：hiddenOverflow属性 overflow:规定当内容溢出元素框时发生的事情 overflow

4、:visible 默认值。内容不会被修剪，会呈现在元素框之外。 overflow:hidden 内容会被修剪，并且其余内容是不可见的。 overflow:scroll 内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。 overflow:auto 如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。 注意： 利用overflow：hidden清除浮动时，父元素里面不能有定位超出的元素，如果有，超出的部分会被隐藏。清除浮动方法4：利用after伪元素清除浮动清除浮动 visibility:规定元素是否可见 visibility:visible； 默认值，元素是可见的 visibilit

5、y:hidden ； 元素是不可见的 注意： 做项目时我们常用after伪元素清除浮动，因为它不会额外增加标签，而且不会出现因为用overflow：hidden超出的部分会被隐藏，父元素高度也不用写死，我们只要在页面写一次清浮动的代码，在需要清浮动的位置加个clearfix类名就可以了。定位属性 position: static; 默认值。 无定位，在HTML文档流中默认的位置。 position: absolute;(表示绝对定位) 这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的祖先元素进行绝对定位。如果不存在这

6、样的元素，则相对于body元素。定位属性 position: relative;（表示相对定位） 相对于它在正常文档流的位置进行定位。 它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置 position: fixed; （表示固定定位） 相对于浏览器窗口进行定位。 元素的位置通过 left, top, right 以及 bottom 属性进行规定。定位的使用绝对定位的元素完全脱离标准流（在文档流中不占位置）。 它完全漂浮在标准流的上方。相对定位在文档流中是占有位置的。 不管怎么移动，原来的位置保留。根据这个特点，我们一般这样使用：子元素绝对定位，父元素相对定

7、位。定位的特性1、行内元素添加了绝对定位可以直接给高和宽不用转换2、块元素添加了绝对定位，如果没有指定宽度，会自动收缩到内容的宽度。3、绝对定位的盒子不受父盒子padding的影响。4、父元素有绝对定位，可以不需要清除浮动堆叠属性z-index:规定元素的堆叠顺序 拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。 元素可拥有负的 z-index 属性值 z-index的默认属性值是0 仅能在定位元素上奏效（relative,fixed,absolute) 该属性设置一个定位元素沿 z 轴的位置，z 轴定义为垂直延伸到显示区的轴。如果为正数，则离用户更近，为负数则表示离用户更远。定位使用的范围层布局模型（定位）就像是图像软件PhotoShop中