浮动与定位解析
HTML笔记之定位与浮动
2.浮动float 浮动对块元素和行元素都有效果
流：在网页设计中指元素（标签）的排列方式
1）标准流(未浮动)：一种默认的方式，自上而下依次排列。
2）非标准流（浮动）：某个元素脱离了标准流（本身的位置），就成为了非标准流
十.布局方式：
1.定位
1）静态定位：position:static（默认状态下的排列方法）
2）相对定位：position:relative
规则：
1、设置相对定位后元素移动，原来位置依然会被占据，移动位置是以参照物的左上角为基准。
2、不会影响其他的元素。
行级元素浮动：
浮动后的行级元素会自动转为块级元素(注意：浮动的块级元素会对行级元素产生影响，行级元素会跟块级元素水平排列)
属性：
left：左浮动：元素从左至右排列
right：右浮动：元素从右至左排列
none：不浮动（默认值）
/******************************/
规则： 1、设置了浮动的源自素，脱离普通流，拥有自己的浮动方式，会水平排列。(跳到前面的界面)
2、会影响其他元素，也就是说其他元素会占据该元素的位置。
3、当父容器放不下多个设置的浮动的元素时，元素会自动换行。
4、当没有设置元素大小的时候，该元素会自适应内容大小，尽量减少自己所占得位置。
3、移动的参照物是，元素移动前所在的位置。
设置方式：
css相对应的选择器中书写
position:relative;
top:在原来位置向下移动（据上方的距离）
HTML5中的浮点与定位
HTML08.浮动与定位
笔记大纲：
1)浮动与清除浮点
2)3种定位方式
3)图层的遮罩效果
1.浮动：块级元素每个本来单独占行，但是为了能让块漂浮挨个显
示（这里也不能使用行级元素，行级没有宽和高），这个时候，我们可以使用浮动来解决，float：left；这样相应的块就从左到右排列，放不下父容器就换行显示。
2.一般情况下，字元素的margin会和父元素的margin合并，解决
办法有两种：
1)让父元素有border和padding
2)子元素全部浮动
注意：浮点，要么子元素都浮动，要么都不浮动；
3.浮动的方式有：
1)float:left;/*逐个从左到右排序*/
2)float:right;/*逐个从右到左排序*/
3)float:none;不浮动，默认值
注：浮动的会挤到或者覆盖没有浮动的元素，容易造成布局混乱，所以还是需要进行要么全部浮动，要么都不浮动
4.如果不想块按照原有的方式布局摆放，我们可以使用定位来解决，
定位的方式主要有3种
1)相对定位
position:relative;
top:10px;
left:10px;
元素相对自己的位置进行移动，空间保留
2)绝对定位
position:absolute;元素默认相对body进行定位，但如果父元素有定位方式，就相对父元素进行定位，的那不占任何原有空间；
3)混合定位：
position:fixe;元素会漂在相对的位置上，随着滚动条滚动而滚动；注：当多个层进行定位方式会有层叠的问题，那么可以使用z-index 属性进行排序，值越大越在上面；
5.。
网页布局的三种方式-标准流、浮动和定位
⽹页布局的三种⽅式-标准流、浮动和定位⽹页布局的三种⽅式⽹页布局的本质——⽤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图⽚和⽂字的浮动效果，所以不会出现浮动元素盖住⽂字的情况出现。
⼆、如果多个盒⼦都设置了浮动，则它们会按照属性值⼀⾏内显⽰并且顶端对齐排列例如三个在同⼀个⽗盒⼦下的⼦盒⼦，都设置左浮动例如在同⼀个⽗盒⼦下的两个⼦盒⼦分别设置左浮动和右浮动注意：浮动的元素是互相贴靠在⼀起的（不会有缝隙），如果⽗级宽度装不下这些浮动的盒⼦，多出的盒⼦会另起⼀⾏对齐三、浮动元素会具有⾏内块元素特性任何元素都可以浮动。
深入理解css布局之定位与浮动
深入理解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.浮动(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。
web程序设计之浮动布局和定位布局
浮动布局和定位布局一、网页元素的三种位置方式普通流：不浮动、定位，前面做的那些网页浮动：用float样式的网页定位相对定位绝对定位固定定位二、浮动布局浮动现象的特点（1）浮动元素只能水平地向左或向右浮动，不可能斜向上或斜向下浮动。
（2）浮动元素离开了普通流。
浮动元素之后的块状元素将忽略它并占据它原来的空间。
行内元素（文字）会围绕在浮动元素周围。
（3）如果不希望浮动元素对后面的元素产生影响，可以为后面的元素应用“clear”属性，如果为清理元素设置“margin-top”属性，该属性不起作用。
因此应避免为清理元素设置“margin-top”属性（4）如果让一个元素浮动，它会向左或者向右浮动直至遇到父元素的边缘。
如果向同一方向再浮动一个元素，它会浮动直至遇到前一个浮动元素的边缘（5）如果向同一方向浮动多个元素，它们将一个挨一个排列，当水平空间无法容纳更多的浮动元素时，浮动元素会换行排列（6）应该为浮动元素设定宽度。
如果不设定宽度，浮动元素有宽度最小化的趋势，在不同的浏览器中会有不同的显示效果（自适应）（7）浮动元素的边距（如margin-top、margin-bottom）不会重叠，而普通流中的元素会出现重叠父元素不能包含浮动的子元素的处理办法迫使父元素包含子元素的方法：方法一：为父元素设置overflow：hidden: 。
对于IE6浏览器需要为父元素设置zoom: 1 方法二：利用一个子元素清除浮动（clear方法）二、定位布局定义：定位是指通过选取适合的参照物，并设置left 或right、top 或bottom 属性，来确定元素在网页中的位置（1）相对定位①position: relative;②相对定位是指元素相对于它的原始位置定位③相对定位元素仍然保留它在文档流中的原始位置④如果不设置宽度，相对定位元素的宽度保持原来大小⑤绝对定位是指元素相对于最近的已定位的祖先元素定位。
如果不存在已定位的祖先元素，则相对于浏览器视口定位（2）绝对定位①绝对定位是指元素相对于最近的已定位的祖先元素定位。
浮动定位以及其区别
浮动定位以及其区别浮动元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。
语法: 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属性，用于指定元素在页面中的位置。
通过将元素浮动到屏幕的左侧或右侧，我们可以实现多个元素的并排显示。
1. 浮动的基本概念在CSS中，通过设置元素的`float`属性为`left`或`right`来实现浮动。
例如，设置`float: left;`可以将元素浮动到屏幕的左侧。
2. 浮动的应用场景浮动常用于实现网页的多栏布局。
通过将导航栏、侧边栏和内容区域进行浮动，可以实现这种布局效果。
3. 浮动的使用方法要使用浮动来控制元素的位置，需要遵循以下步骤：（1）在HTML中，给需要浮动的元素添加一个class或id属性，用于在CSS中选择该元素。
（2）在CSS中，通过选择器选中需要浮动的元素，并设置`float`属性的值为`left`或`right`。
（3）根据需要，设置元素的宽度、高度以及其他样式属性。
二、定位定位是一种通过CSS属性来精确定位元素的方法。
与浮动不同，定位可以将元素放置在页面的任意位置。
1. 定位的基本概念在CSS中，常用的定位方式包括相对定位（`position: relative;`）、绝对定位（`position: absolute;`）和固定定位（`position: fixed;`）。
这些属性可以用于设置元素的位置。
2. 定位的应用场景定位常用于实现网页的特殊效果，如悬浮菜单、弹出窗口等。
通过使用不同的定位方式，我们可以将元素放置在页面的任意位置。
3. 定位的使用方法要使用定位来控制元素的位置，需要遵循以下步骤：（1）在HTML中，给需要定位的元素添加一个class或id属性，用于在CSS中选择该元素。
（2）在CSS中，通过选择器选中需要定位的元素，并设置`position`属性的值为`relative`、`absolute`或`fixed`。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
CSS 定位与浮动 CSS允许任何元素浮动float，不论是图像，段落还是列表。
无论先前元素是什么状态，浮动后都成为块级元素。
浮动元素的宽度缺省为auto。
浮动有一系列控制它的规则。
1.浮动元素的外边缘不会超过其父元素的内边缘。
2.浮动元素不会互相重叠。
3.浮动元素不会上下浮动。
4.如果一个浮动元素在另一个浮动元素之后显示，而且会超出容纳块，则它下降到低于先前任何浮动元素的位置。
说简单点就是没有空间的话，就另起一行。
CSS 定位机制 CSS 有三种基本的定位机制：普通流、浮动和绝对定位。
除非专门指定，否则所有框都在普通流中定位。
也就是说，普通流中的元素的位置由元素在 (XHTML 中的位置决定。
块级框从上到下一个接一个地排列，框之间的垂直距离是由框的垂直外边距计算出来。
行内框在一行中水平布置。
可以使用水平内边距、边框和外边距调整它们的间距。
但是，垂直内边距、边框和外边距不影响行内框的高度。
由一行形成的水平框称为行框（Line Box），行框的高度总是足以容纳它包含的所有行内框。
不过，设置行高可以增加这个框的高度。
CSS position 属性通过使用 position 属性，我们可以选择 4 种不同类型的定位，这会影响元素框生成的方式。
position 属性值的含义：static 元素框正常生成。
块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
relative 元素框偏移某个距离。
元素仍保持其未定位前的形状，它原本所占的空间仍保留。
absolute 元素框从文档流完全删除，并相对于其包含块定位。
包含块可能是文档中的另一个元素或者是初始包含块。
元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。
元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
fixed 元素框的表现类似于将 position 设置为 absolute，不过其包含块是视窗本身。
提示：相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。
定位 position，我们通常用到的是绝对(absolute和相对(relative 定位通常，做弹出菜单的时候，会用到定位，父元素相对定位position:relative，其中的子元素绝对定位position:absolute，通过top，right，bottom，left的值来控制子元素的位置，要注意的是子元素的位置将相对于父元素，而不是整个页面。
浮动与定位的区别通过定位虽然也可以进行布局，但是它的特点决定了它不适合做页
面的布局，因为被定义的元素在普通文档中占有的任何空间都将被关闭，可以说，它是漂
浮在整个页面上面的，所以，它可以和页面上其他的内容重叠显示。
这个特点可以方便的让我们做出其他特殊的效果，但是相对与浮动就布局来说，我们更多的还是用浮动。