下载文档原格式
CSS 定位与浮动 CSS允许任何元素浮动float，不论是图像，段落还是列表。
无论先前元素是什么状态，浮动后都成为块级元素。
浮动元素的宽度缺省为auto。
浮动有一系列控制它的规则。
1.浮动元素的外边缘不会超过其父元素的内边缘。
2.浮动元素不会互相重叠。
3.浮动元素不会上下浮动。
4.如果一个浮动元素在另一个浮动元素之后显示，而且会超出容纳块，则它下降到低于先前任何浮动元素的位置。
说简单点就是没有空间的话，就另起一行。
CSS 定位机制 CSS 有三种基本的定位机制：普通流、浮动和绝对定位。
除非专门指定，否则所有框都在普通流中定位。
也就是说，普通流中的元素的位置由元素在 (XHTML 中的位置决定。
块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。
行内框在一行中水平布置。
可以使用水平内边距、边框和外边距调整它们的间距。
但是，垂直内边距、边框和外边距不影响行内框的高度。
由一行形成的水平框称为行框（Line Box），行框的高度总是足以容纳它包含的所有行内框。
不过，设置行高可以增加这个框的高度。
CSS position 属性通过使用 position 属性，我们可以选择 4 种不同类型的定位，这会影响元素框生成的方式。
position 属性值的含义：static 元素框正常生成。
块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
relative 元素框偏移某个距离。
元素仍保持其未定位前的形状，它原本所占的空间仍保留。
absolute 元素框从文档流完全删除，并相对于其包含块定位。
包含块可能是文档中的另一个元素或者是初始包含块。
元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。
元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
fixed 元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。
⽹页布局的三种⽅式-标准流、浮动和定位⽹页布局的三种⽅式⽹页布局的本质——⽤CSS 来摆放盒⼦。
把盒⼦摆放到相应位置CSS 提供了三种传统布局⽅式(简单说,就是盒⼦如何进⾏排列顺序)：普通流（标准流）浮动定位标准流标准流定义所谓的标准流:，就是标签按照规定好默认⽅式排列1. 块级元素会独占⼀⾏，从上向下顺序排列。
常⽤元素：div、hr、p、h1~h6、ul、ol、dl、form、table2. ⾏内元素会按照顺序，从左到右顺序排列，碰到⽗元素边缘则⾃动换⾏常⽤元素：span、a、i、em 等以上都是标准流布局，标准流是最基本的布局⽅式。
浮动浮动定义浮动最典型的应⽤：可以让多个块级元素⼀⾏内排列显⽰。
⽹页布局第⼀准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。
float 属性⽤于创建浮动框，将其移动到⼀边，直到左边缘或右边缘触及包含块或另⼀个浮动框的边缘。
语法：选择器{ float: 属性值; }属性值：值描述left元素向左浮动。
right元素向右浮动。
none默认值。
元素不浮动，并会显⽰在其在⽂本中出现的位置。
inherit规定应该从⽗元素继承 float 属性的值。
浮动特性⼀、脱离标准普通流的控制（浮）移动到指定位置（动）, （俗称脱标），且浮动的盒⼦不再保留原先的位置如同其名字的意义⼀样，浮动，即浮动到元素上⽅，可以这样来理解：标准流在最底层，浮动的元素在标准流的上⽅，即脱离了标准流的控制。
同时它位于标准流的上层，所以标准流⾥不会再存在它的位置。
但也会有特殊的情况，即⽂字和浮动元素位于同⼀个⽗元素⾥时，浮动元素不会盖住⽂字，⽽是环绕⽂字，这是因为浮动设计的初衷就是类似word图⽚和⽂字的浮动效果，所以不会出现浮动元素盖住⽂字的情况出现。
⼆、如果多个盒⼦都设置了浮动，则它们会按照属性值⼀⾏内显⽰并且顶端对齐排列例如三个在同⼀个⽗盒⼦下的⼦盒⼦，都设置左浮动例如在同⼀个⽗盒⼦下的两个⼦盒⼦分别设置左浮动和右浮动注意：浮动的元素是互相贴靠在⼀起的（不会有缝隙），如果⽗级宽度装不下这些浮动的盒⼦，多出的盒⼦会另起⼀⾏对齐三、浮动元素会具有⾏内块元素特性任何元素都可以浮动。
1.浮动(float)在div+css中浮动分为左浮动右浮动和清除浮动。
①右浮动（float：right）指一个块元素向右移动，并且空出自己左边的位置，让给其他元素，直到碰到包含该块元素的边框为止。
②左浮动（float：left）指一个块元素向左移动，让出它右面的空间，让别的块元素显示。
如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素”卡住”。
并且只从它下一行的右下角往后排！③清除浮动（clear：left；clear：right；clear：both）如果不希望别的元素在某个元素的左边后者右边，可以使用清除浮动的方式。
2.浮动对块元素和行内元素都有效，并且只有在浮动的情况下，浏览器才解析行内元素的宽和高。
3.定位(position) 常见的定位有4种①static（默认的）Left 和top 属性对static 定位的元素不生效。
Static 是靠margin-left 和margin-top 进行定位的②relative 相对定位所谓相对定位是相对于该元素原先所在位置的左上角定位的，虽然它脱离了标准流，但是它原先的位置不会被占据。
代码#spe{Position:relative;Left:40px;Top:100px;}③absolute 绝对定位绝对定位是指：以包含该元素且脱离了标准流的元素为基础定位的，但是如果没有父元素（或有父元素，但父元素没有脱离标准流），则相对于body左上角定位。
④fixed 固定定位所谓fixed定位，指的是不管怎样，总是以视窗左上角为基准定位。
4.z-index 用于设置对象（div）显示的时候的层叠顺序。
.cls{z-index：#;}#=1 2 3 4 数字越小，对象越在下边。
postion:relative是子块级元素面向父级元素的相对定位，定位关键字使用left/right/top/bottom，而float:right/left是子块级元素流集合面向父级元素的定位，定位的关键词使用margin/padding。
１.1 标准流(文档流)块级元素独占一行显示标准流的显示方式元素默认的显示方式就是标准流。
１.2 浮动用法：Float:left| right特点：☞设置了浮动的元素不占原来的位置（脱标）☞可以让块级元素在一行上显示☞浮动可以行内元素转化为行内块元素模式转换的过程中，能用display就用display 作用：☞浮动用来解决文字图片环绕问题☞制作导航栏☞网页布局１.3 清除浮动☞清除浮动不是删除浮动☞清除浮动指的是清除浮动的影响注意：当子元素设置了浮动，父元素没有高度的时候，造成页面布局混乱。
这种情况下进行清除浮动。
１.4 清除浮动的几种方式☞使用clear:left| right | bothClear:both;在要清除浮动的元素后面添加一个标签☞给父盒子设置overflow:hidden如果父盒子中有定位的元素，一般不推荐使用该种方式清除浮动。
☞使用伪元素清除浮动１.5 Overflow的使用☞hidden 将超出部分进行隐藏☞auto如果内容超出盒子，那么给盒子设置滚动条，如果内容没有超出盒子，那么不显示滚动条。
☞scorll２定位方位名称：Left，right ，top, bottom２.1 静态定位（static）用法：Position：static静态定位就是元素标准流的显示方式。
２.2 绝对定位（absolute）看脸型用法：Position：absolute;特点：☞当给一个单独的元素设置绝对定位，以浏览器左上角（body）为基准设置定位的。
☞当盒子发生嵌套关系的时候，如果父盒子没有设置定位，子盒子设置定位以浏览器左上角为基准设置定位。
☞当盒子发生嵌套关系的时候，如果父盒子设置定位，子盒子设置定位父盒子左上角为基准设置定位。
☞给盒子设置了绝对定位，该盒子不占位置（脱标）☞给行内元素设置绝对定位后，该元素转化为了行内块元素注意：元素设置了绝对定位后，通过具体的方位名称可以随便设置元素的位置。
浮动定位的概念和作用
一、概念
浮动定位是一种CSS布局技术，它通过设置元素的float属性来实现元素在页面上的浮动效果。
浮动可以使元素向左或向右移动，直到它碰到父级元素的边界或另一个浮动元素。
二、作用
1.实现文字环绕效果
通过设置元素的float属性，可以让元素沿着容器边缘浮动，实现文字环绕效果。
例如，将图像设置为浮动，文本就会环绕在图像周围，形成图文混排的效果。
2.实现网页布局的多样化
通过将元素设置为浮动，可以让元素按照不同的方向排列，实现更加灵活的网页布局。
例如，可以将一组按钮设置为浮动排列，形成水平导航条。
3.方便地实现定位和排版
使用浮动定位可以方便地将元素定位到页面的特定位置，并且可以轻松地调整它们的顺序和位置。
此外，还可以使用clear属性来清除浮动，防止元素重叠。
4.快速排版
使用浮动定位可以快速地将文本和图片等元素排列在一起，实现快速排版。
这对于制作宣传册、海报等需要快速排版的任务非常有用。
盒⼦的定位和布局⼀、基本概念（⼀）视觉格式化模型1. 视觉格式化模型（visual formatting model）：CSS的⼀种机制，它规定了页⾯中的多个盒⼦如何布局2. css的⼀种机制，视觉格式化模型属于css范畴3. 多个盒⼦如何布局，中的每个HTML元素都会在页⾯盒⼦中⽣成4. 这些盒⼦如何排列、如何相互影响，由视觉格式化模型定义5. 视觉格式化模型是⼀套⾮常复杂的机制，包含错综复杂的CSS规范6. 本章的课程从实⽤的⾓度出发，仅学习在划分页⾯区域的时候需要的核⼼知识7. 由于划分页⾯区域时⼏乎都使⽤的是块盒，因此，本章仍然只涉及块盒（⼆）视⼝1. 视⼝（viewport）：可视窗⼝，通常指浏览器的可视区域2. 视⼝的尺⼨仅受到浏览器可视窗⼝⼤⼩的影响，和内容⽆关3. 当⽹页内容的尺⼨超过视⼝尺⼨时，浏览器会出现滚动条（三）包含块1. 包含块（containing block）：每个元素都有⼀个包含块，它是指元素在页⾯中摆放的区域2. 通常情况下，元素的包含块是它⽗元素的内容盒（content-box）3. 包含块：初始化包含块（initial containing block）初始化包含块是浏览器在渲染前⾃动⽣成的⼀块区域4. 包含块（containing block）：每个元素都有⼀个包含块，它是指元素在页⾯中摆放的区域5. 通常情况下，元素的包含块是它⽗元素的内容盒（content-box）6. 根元素的包含块是初始化包含块（initial containing block）⼆、定位体系概述（⼀）什么是定位体系1. 视觉格式化模型规定，定位体系⼀共有三种：常规流（normal flow）浮动（float）绝对定位（absolute positioned）2. 任何⼀个元素，必须属于其中⼀种定位体系3. 不同的定位体系中，元素在包含块中的尺⼨和位置会有⼀些差异（⼆）定位体系判定1. position是⼀个CSS属性，默认值为static2. float是⼀个CSS属性默认值为none三、盒模型的定位体系1．定位体系影响盒模型等于最终盒⼦尺⼨；定位体系等于盒⼦尺⼨2．盒模型中的尺⼨：margin：px、em、%、auto；border：px、em；padding：px、em、%；width：px、em、%、auto；height：px、em、%、auto 3．尺⼨为设定的值，与定位体系⽆关4．尺⼨是包含块尺⼨的百分⽐，margin、padding、width的百分⽐：是包含块宽度的百分⽐；height的百分⽐（很少使⽤）5．尺⼨受到定位体系的影响6．不同的定位体系，auto的计算规则不⼀样四、常规流（⼀）常规流1. 常规流，⼜叫做普通流、⽂档流、普通⽂档流2. 常规流是最常见的定位体系，所有元素默认状态下都是常规流定位（⼆）盒模型中的auto值1. 常规流盒⼦⽔平⽅向上的尺⼨，必须等于包含块的宽度2. margin为auto：0px；height为auto：适应内容的⾼度3. ⽔平⽅向：常规流盒⼦⽔平⽅向上的尺⼨，必须等于包含块的宽度，如果不⾏，则强⾏将margin-right设置为auto4. 垂直⽅向：margin为auto：0px；height为auto：适应内容的⾼度五、盒⼦位置1. 盒⼦在包含块的垂直⽅向上依次摆放，盒⼦在包含块的垂直⽅向上依次摆放。
CSS系列：CSS中盒子的浮动与定位1. 盒子的浮动在标准流中，一个块级元素在水平方向会自动伸展，知道包含它的元素的边接；而在竖直方向与相邻元素依次排列，不能并排。
CSS中float属性，默认为none。
将float属性的值设置为left或right，元素就会向其父元素的左侧或右侧靠紧。
同时默认情况下，盒子的宽度不再伸展，而是根据盒子里面的内容的宽度来决定。
float: left;可以使用clear来清除浮动：clear: left | right | both;2. 盒子的定位在CSS中有一个position属性，用来进行定位操作。
position属性可以设置为4个属性值之一：◊ static：默认的属性值，该盒子按照标准流（包括浮动方式）进行布局；◊ relative：相对定位，使用相对定位的盒子的位置常以标准流的排版方式为基础，然后使盒子相对于它在原本的标准位置偏移指定的距离。
相对定位的盒子仍在标准流中，它后面的盒子仍以标准流方式对待它。
◊ absolute：绝对定位，盒子的位置以它的包含框为基准进行偏移。
绝对定位的盒子从标准流中脱离。
它对其后的相邻盒子的定位没有影响，其他的盒子就好像这个盒子不存在一样。
◊ fixed：固定定位，它和绝对定位类似，只是以浏览器窗口为基准进行定位，当拖动浏览器的滚动条时，依然保持对象位置不变。
2.1 staticstatic为默认值，表示块保持在原本的位置上，不会有任何移动的效果。
没有设置任何position属性相当于使用static方式。
2.2 relative使用relative相对定位，除了将position属性设置为relative之外，还需要指定一定的偏移量，水平方向通过left或者right属性来指定，竖直方向通过top或bottom来指定。
<!DOCTYPE html><html><head><title></title><style type="text/css">.relative {position: relative;top: 20px;left: 20px;width: 500px;}</style></head><body><div class="relative">Position相对偏移</div></body></html>在上面的示例中，.relative若不设置width，则由于block元素会自动伸展到宽度与父元素相同，且加上left的20px，则在浏览器中预览时，会出现横向滚动条。
绝对定位与相对定位和浮动的区别与运用
绝对定位和浮动的区别和运用
1. 绝对定位的本身是与文档流无关，他的定位是从浏览器的左上方或者父级开始计算的。
因此不占空间，普通文档流中的元素的布局就当绝对定位的元素不存在时一样。
所以他可以覆盖页面上的其他元素。
2.浮动元素的定位还是基于正常的文档流，然后从文档流抽出并尽可能远的移动至左侧或者右侧。
文字内容会围绕在浮动元素周围。
它只是改变了文档流的显示，而没有脱离文档流。
绝对定位与相对定位
1.absolute，绝对定位的框与文档流无关，所以他们可以覆盖页面上的其他元素并可以通过z-index来控制它的层级次序。
z-index的值越高，它显示的越在上层。
2.relative,对一个元素进行相对定位，首先它出现在它所在的位置上。
然后通过设置垂直或水平位置，让这个元素“相对于”它的原始起点进行移动。
（相对定位时，无论是否进行移动，元素仍然占据原来的空间。
因此，移动元素会导致它覆盖其他框）
3.父元素相对定位。
子元素绝对定位。
这样子子元素的位置不在相对浏览器左上角，而是相对于父级窗口的左上角。
4.相对和绝对需要配合top/ right/ bottom/left来定位具体位置，这四个属性只有在该元素使用定位后才生效，其他情况无效。
浮动定位以及其区别浮动元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。
语法: float :leftrightnone(默认)注意:1. 浮动的元素要有父元素2. 浮动后的元素类似元素行内块元素,即使行内元素浮动后也可以设置宽高.(类似不代表是,浮动后的盒子可以设置宽高，但是不能用行内块的方式让盒子居中，比如：给浮动的盒子父元素添加text-algin ：center ；是不起作用的；需要给盒子margin 才能调整其位置)3. 浮动的元素会脱离文档流,但是没有脱离文本流浮动带来的影响：父元素高度塌陷 : 子元素浮动,父元素没有设置高,子元素不能把父元素的高给撑开,导致父元素没有高度,这种现象叫父元素高度塌陷 .清除浮动1.加固定的高缺点:不灵活2.额外标签法在父元素的末尾加一个空div, 给父元素设置clear:left/right/both优点：通俗易懂，书写方便缺点：添加许多无意义的标签，结构化较差。
3.父级添加overflow属性方法在父元素身上设置 : 除了visible以外的其他overflow 的值都可以 , overflow:hidden/scroll/ auto原因: 是overflow触发了BFC, 在计算BFC高度的时候,浮动的子元素的高度也计算在内优点:代码简洁缺点 :无法显示需要溢出的元素4.使用after伪元素清除浮动优点 : 结构语义化正确缺点 : 由于IE67不支持:after，使用 zoom:11 .clearfix:after {2 content: "";3 display: block;4 clear: both;5 }6 .clearfix {7 zoom: 1;8 }定位1.postion: static 默认值静态定位2.postion : relative : 相对定位特点 : 不脱离文档流 ,以自身的位置来定位的应用场景 :微调元素做绝对定位的参考，子绝父相3.position:fixed : 固定定位不管怎么滚动滚动条,始终固定在某个位置特点 : 脱离了文档流,以浏览器窗口来定位的4.position:absolute : 绝对定位特点 : 脱离了文档流, 以最近已定位的”父元素”的位置来说的,如果父元素都没有定位,以html的位置来说的备注 : 已定位的”父元素”可以是绝对定位/ 相对定位/固定定位,子绝父相用的最多方向关键字left : 正值是向右走的负值往左走top : 正值是向下走的负值往下走right : 正值是向左走的负值往右走bottom : 正值是向上走的负值往下走注意: static定位身上不能用方向关键字脱离文档流的元素1.固定定位2.绝对定位3.浮动特点 : 类似于行内块元素,如果不设置宽高,它的宽高是由内容撑开的,即使是行内元素,可以设置宽高如何让定位的盒子垂直居中:1 {2 left:50%;3 top:50%;4 margin-left:-盒子宽度的一半;5 margin-top:-盒子高度的一半;6 }78 {9 left:50%;10 top:50%;11 <!--向左移动自己宽度的一半-->12 transform: translateX(-50%);13 <!--向上移动自己高度的一半-->14 transform: translateY(-50%);15 }浮动定位区别CSS2中能够使标签脱离文档流的属性有：float:left/right;postion:absolute/fixed;float脱离文档流时，其他盒子会无视这个标签，但其他盒子内的文本、图片、表单标签依然会为这个标签让出位置，环绕在周围( 脱离文档流，不脱离文本流 )。
深入理解css布局之定位与浮动在css知识体系中，除了css选择器，样式属性等基础知识外，css布局相关的知识才是css比较核心和重要的点。
今天我们来深入学习一下css布局相关的知识。
上篇文章我们讲完了css布局中盒模型和元素分类的相关知识，同时介绍了box-sizing和行框。
这篇我们继续...一、定位与浮动上篇我们讲解了不同类型元素的特点，我们可以随意的排列组合他们来达到我们想要的效果。
但是他们都是基于一个二维平面的，如果我们想在布局中有遮挡，重叠之类的更丰富效果，我们就需要使用到定位和浮动的相关知识。
1.1 文档流文档流就是按照页面元素书写的顺序，将页面元素按从左到右，从上至下的一般顺序进行排列。
那么也就可以理解成我们刚才所说的一个二维平面的概念。
那么如果我想要实现更丰富的效果，就需要脱离文档流，在一个新的平面上去显示，这样我们就可以在屏幕上有多个平面叠加显示的效果了，那么这就是浮动和定位的工作了。
1.2 定位定位允许你使用position 属性，将一个元素相对于他自己或者他的祖先元素甚至是浏览器窗口通过 top , left , right , bottom 属性进行偏移。
根据position 属性的取值，元素可以分为静态定位元素static （默认值）、相对定位元素relative、绝对定位元素absoute和固定定位元素fixed。
首先我们抛开static这个默认值，因为他基本不属于定位的范畴，因为元素默认就是static，他就相当于是依据文档流显示。
当我们使用定位时，需要position属性和top,left,right,bottom 这两类属性共同参与来决定一个元素的定位类型和偏移量。
使用方法很简单，这里说下他们之间的区别:•relative相对定位•元素根据其在当前文档流所在位置作为参考系，进行偏移。
•定位之后原来元素在文档流中的位置会被空出来，不会被其他元素所占据。
•absolute绝对定位•元素会将其带有position为非static的祖先元素作为参考系进行偏移。
盒⼦属性，浮动，定位1.盒⼦常见属性1）容器盒⼦Box-size:设置盒⼦模型，CSS3标准，content-box:正常默认模式，起源于⾕歌，元素的整体⼤⼩会被内边距和边框撑开border-box：怪异模式，起源于IE，元素的整体⼤⼩不会被内边距和边框撑开Width:宽度Height:⾼度注意：width,height会根据box-size盒⼦模型的不同来决定是内容的宽度和⾼度，还是整个元素⼤⼩的宽度和⾼度。
2）Padding:内边距Padding-left,padding-right,padding-top,padding-bottomPadding:上右下左;Padding:上右下；左边距等于右边距Padding:上右；下跟上边⼀样，左跟右⼀样3）Margin:外边距外边距跟内边距⼀致。
但是两个元素的外边距会重叠。
4）Border:边框语法：border: 边框宽度边框样式颜⾊;可以分开设置，例如border-width: 30px;border-style: dashed;border-color: purple;分别设置上下左右边框，例如border-bottom:50px dotted green;5）Box-shadow:盒⼦阴影box-shadow: 阴影的⽔平偏移值阴影的垂直偏移值阴影的模糊度阴影的颜⾊;6）Display:设置盒⼦是块级元素还是⾏级元素还是弹性元素Block:块级元素，会占据⼀整⾏，有宽⾼，div,h1,p,li,ul...Line-block:⾏块元素，不会占据⼀整⾏，有宽⾼,img...Line:⾏元素，不会占据⼀整⾏，也没有宽⾼,a,span...7）Border-radius:边框的圆⾓8）Background:设置元素的背景，背景图⽚，背景颜⾊Background:是⼀个综合性的属性，可以分出背景颜⾊，背景图⽚，背景是否重复，背景图⽚的位置，背景图⽚的⼤⼩Background-position:设置背景图⽚的位置，left,right,top,bottom,center,百分⽐⼀般可以设置2值，第⼀个值是设置⽔平位置，第⼆个值设置垂直位置Background-size:设置背景图⽚的⼤⼩，注意：有时候不知道图⽚的确切⽐例的时候，只需要设置⼀个宽度或者⾼度，另外⼀个值设置为auto即可。
