摘要：让元素脱离文档流有三种方法浮动绝对定位固定定位元素脱离文档流定位的三种布局机制文档流浮动定位。定位元素会脱离文档流。浮动的元素是先站住自己所在文档流的位置，然后左右浮动。
文档流
文档流是一种默认定位方式，在文档流中元素框的位置由元素在html中的位置决定，文档流中元素的position属性为默认的static或继承来的static并按照普通流定位。块级元素独占一行，自上而下排列；内联元素从左到右排列。
让元素脱离文档流有三种方法：
浮动float;
绝对定位position:absolute;
固定定位position:fixed;
元素脱离文档流demo
CSS的三种布局机制：文档流、浮动、定位。定位定义元素相对于它正常位置应该出现的位置，或者相对于父元素、另一个元素、浏览器本身偏移。定位方式有三种：
div{
position:absolute/relative/fixed
}
1.position:fixed相对于浏览器的窗口定位，定位后的元素脱离文档流。元素的位置通过 left,top,right以及bottom属性进行规定。fixed永远是根据浏览器窗口来定位，无论其他元素怎么设置，都影响不了它。
2.position:relative相对于元素自身正常位置进行定位,元素在文档流中仍占据原来空间，只是表现出来的位置会相对原来的位置偏移。left:20会向元素的 LEFT 位置添加 20 像素。
3.position:absolute,相对于有定位属性（fix/relative/absolute，一般是用relative）的第一个父元素偏移,如果找不到这种父元素就向上层找，直到body，html元素。absolute定位元素会脱离文档流。元素的位置通过 left,top,right以及bottom属性进行规定。
定位方式demo
1.absolute的定位：浏览器会递归查找该元素的所有父元素，如果找到一个设置了position:relative/absolute/fixed的元素，就以该元素为基准定位，如果没找到，就以浏览器边界定位。一般情况下，我们会将relative与absolute配套使用，方便我们对absolute元素定位。
2.relative的定位：relative元素的定位永远是相对于元素自身位置的，和其他元素没关系，也不会影响其他元素。
3.fixed的定位：fixed元素的定位永远是相对于浏览器边界的，和其他元素没有关系。
z-index具有定位属性的元素设置top,right,bottom,left，z-index才有效。
z-index（设置层叠）,可以通过z-index属性控制元素在Z轴方向的叠放顺序，z-index越高，元素位置越靠上，如果为正数，则离用户更近，为负数则表示离用户更远。没定位属性的元素设置了无效果。如果2个元素的z-index的值相同，按文档流顺序，后面的元素会悬浮在前面的元素上面。
z-index demo
position：relative可以使元素相对于元素自身正常位置发生偏移，有relative定位属性的元素仍然在文档流中，它仍然占据着原来的位置，所以其他元素的位置不会发生变化。
负margin：通过负margin进行偏移的元素，它会放弃偏移前占据的空间，这样它后面文档流中的其它元素就会“流”过来填充这部分空间，所以其他元素的位置发生了变化。
relativ,负margin偏移区别 demo
将目标元素的父元素设置absolute定位，四方向偏移值设置为0。再将目标元素设置absolute定位，上、左方向设置偏移值为50%（这里50%是相对于父元素），让元素的左上角原点位于页面的中心。再使用负margin使元素左上角沿左、上移动它宽高的一半，这样就能使元素在页面中垂直居中了。
demo
float的设计初衷是用于文字环绕效果，即对一个图片使用float之后，周围的文字环绕它。
1.float使元素脱离文档流，当父元素没设置固定高度时，元素浮动脱离文档流，父元素会收缩
2.元素设置浮动或绝对定位后，如果不给元素设置宽度，元素具有收缩性，元素会根据内容自动调整宽度。也就是说absolute、float具有自适应宽度的特性。
3.行内元素、块级元素浮动后都会变成块级元素。元素使用绝对定位后也会成块级元素
4.浮动的元素可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。由于浮动元素会脱离文档流，其他的普通元素会忽视浮动元素，后面的元素会占据浮动元素的文档流空间。
元素浮动的时候只能向左，或向右，不会向上，向下浮动。浮动的元素是先站住自己所在文档流的位置，然后左右浮动。元素浮动后紧跟的内联元素会贴住浮动的元素(图文环绕)，文字会围绕着浮动元素，这也是设计浮动元素的初衷。
浮动demo
元素浮动后，父元素无法撑起高度（父元素未指定高度时），影响与父元素同级的元素。与浮动元素同级的非浮动元素会紧随其后视浮动元素不存在，占据浮动元素原来的位置。若非第一个元素浮动，则该元素之前的元素也需要浮动，否则会影响布局。demo
1.元素加clear:left/right/both; 可清除该元素前面有浮动元素产生的副作用。元素浮动后谁受影响，clear就加给谁。
2.浮动元素包裹父元素（或直接设置父元素），设置宽度100%，设置overflow：hidden
3.浮动元素包裹父元素（或直接设置父元素），设置父元素after伪元素为block，再设置伪元素clear:both;
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/113390.html
摘要：浮动定位的其中一种方法就是使用属性。例如，是一个内联元素，它默认的值为和值是不生效的。然而，如果我们将这个内联元素设置为浮动，那么它的默认值会变成这时候和值就生效了。包裹元素就是将浮动元素置于父元素中，父元素作为容器会置于正常的文件流中。 CSS最大的用处之一就是可以将内容和元素定位到任何我们想要的位置，使我们的设计具有结构，使内容更加易懂。 CSS有好几种不同的定位属性，每种都有自己...
摘要：浮动定位的其中一种方法就是使用属性。例如，是一个内联元素，它默认的值为和值是不生效的。然而，如果我们将这个内联元素设置为浮动，那么它的默认值会变成这时候和值就生效了。包裹元素就是将浮动元素置于父元素中，父元素作为容器会置于正常的文件流中。 CSS最大的用处之一就是可以将内容和元素定位到任何我们想要的位置，使我们的设计具有结构，使内容更加易懂。 CSS有好几种不同的定位属性，每种都有自己...
摘要：并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。宋体清除浮动这是专业术语，其实就是需要我们解决浮动带来的影响宋体父元素的高度塌陷宋体。相对定位的参考点是自身。 一、浮动 1.1 各个语言的主要知识点 HTML：标签语义化(那么怎么样布局才是合理的?没有绝对的对和错) CSS： 样式： 布局： 标准流(标准文档流、普通文档流)：盒子模型(width/height...
摘要：最近学习发现了高度塌陷时候要清除浮动为了理解清楚浮动原理网上找了不少资料发现都写的不是很清楚而且都是一模一样的内容我在里分享一下我对清楚浮动原理的理解如果你已经很了解什么是浮动和浮动的效果你可以直接跳转到三如何清除浮动重点阅读一什么是浮动最近学习css发现了高度塌陷时候要清除浮动,为了理解清楚浮动原理,网上找了不少资料,发现都写的不是很清楚,而且都是一模一样的内容,我在里分享一下我对清楚浮动...
摘要：随堂笔记三关于背景图片设置背景图片图片的路径背景图片位置方位名词背景位置如果只设置一个方位词，另外一个默认居中如果设置的值是两个方位词，与顺序无关数值背景位置如果设置的值是数字一个值得时候，表示水平方向的位移，垂直方向默认居中两个值得Css随堂笔记（三） 1 关于背景图片 A 设置背景图片：background-image：url(图片的路径)； B 背景图片位置： backgrou...
阅读 3189·2021-11-10 11:36
阅读 3087·2021-10-08 10:21
阅读 2485·2021-09-29 09:35
阅读 2171·2021-09-22 16:06
阅读 3675·2021-09-09 09:33
阅读 1201·2019-08-30 15:44
阅读 3044·2019-08-30 10:59
阅读 2870·2019-08-29 15:32
