CSS 文档流定位(float,position)

最新推荐文章于 2024-07-25 10:45:42 发布

EdVzAs

最新推荐文章于 2024-07-25 10:45:42 发布

阅读量413

点赞数

文章标签： css html 定位文档流

本文链接：https://blog.csdn.net/weixin_46131409/article/details/104863091

版权

HTML/CSS/JS 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

一.文档流
1.文档流:元素排版布局过程中,元素会自动从左往右,从上往下的流式排列

2.block元素和inline元素在文档流中的排列方式:

block元素通常被现实为独立的一块,独占一行,多个该类元素会各自新起一行;默认宽度自动填满父元素宽度;可设置width/height/margin/padding属性
inline元素不会独占一行,多个相邻的行内元素会排列在同一行里,直到一行排列不下,才会新换一行;宽度随元素的内容而变化;设置width/height属性无效;水平方向的padding/margin-left/right都产生边距效果,但竖直方向的padding/margin-top/bottom不产生边距效果

3.脱离文档流:将元素从普通的布局排版中拿走,其他盒子定位时,会当做脱离文档流的元素不存在而进行定位

只有绝对定位absolute和浮动float才会脱离文档流
脱离文档流的元素可覆盖文档流中的元素

4.部分无视与完全无视:
(1)部分无视:使用float脱离文档流时,其他盒子会无视该元素,但其中文本仍会为该元素让出位置,环绕在周围
(2)完全无视:使用absolute position脱离文档流时,其他盒子与其中文本都会无视该元素

二.浮动float属性:
1.关于float:
(1)定义:浮动的框可以向左/右移动,直到碰到包含框(父元素的边框)或另一个浮动框的边框为止;由于浮动框不在文档的普通流中,文档的普通流中的浮动框之后的块框会表现得像浮动框不存在一样进行排列

注意:这里是块框而不是内联元素
浮动框只对它后面的元素造成影响
浮动框可以遮挡文档流中元素

(2)float被设计的时候是用来完成文本环绕的效果,所以文本不会被挡住,这是float的特性(即float是一种不彻底的脱离文档流方式)

无论多么复杂的布局,基本出发点都是:如何在一行里显示多个div元素

2.语法与定位规则:

float:left/right:向左/右移动
#有float属性的元素竖直位置取决于其前一个元素
#1.如果前一个元素属于标准流==>该元素竖直位置不变(顶部总和上一个元素的底部对齐)
#2.如果前一个元素是浮动的==>该元素竖直位置与前一个元素相同
#                         (跟随在上一个元素后边)
#2时如果一行放不下这两个元素,该元素会被挤到下一行

#浮动框后的block元素元素会认为这个框不存在
#但其中的文本依然会为这个元素让出位置
#浮动框后的inline元素,会为这个框空出位置,然后按顺序排列

3.div盒子重叠现象:

左右结构div盒子重叠现象:一般是由于相邻两个div一个使用浮动一个没有使用浮动
解决方法:要么都不使用浮动,要么都使用float浮动,要么对没有使用float浮动的div设置margin样式

<!DOCTYPE html>
<html lang='en'>
	<head>
		<meta charset='UTF-8'>
		<title>Title</title>
		<style>
		.div1 {width:100px;height:100px;background-color:beige;/*float:left;*/}
		.div2 {width:200px;height:100px;background-color:rebeccapurple;/*float:left;*/}
		.div3 {width:100px;height:200px;background-color:green;/*float:left;*/}
		.div4 {width:200px;height:200px;background-color:yellow;}
		</style>
	</head>
	<body>
		<div class='div1'></div>
		<div class='div2'></div>
		<div class='div3'></div>
		<div class='div4'></div>
	</body>
</html>

在这里插入图片描述

上下结构div盒子重叠现象:container和box3的布局是上下结构;box3跑到了上面,与container发生重叠;但文本内容没有发生覆盖,只有div发生覆盖现象;注意container边框仅为顶端左侧一条线
因为container的子元素脱离了文档流,导致container没被撑开(空盒子);box3认为container没有height(未被撑开),因此跑上去了
解决方法:要么给container设置固定高度,一般情况下文字内容不确定多少就不能设置固定高度,所以一般不能设置’container’高度(当然能确定内容多高时设置一个高度即可解决覆盖问题);要么清除浮动

<!DOCTYPE html>
<html lang="en">
	<head>
	    <meta charset="UTF-8">
		<title>Title</title>
	<style type="text/css">
		* {margin:0;padding:0;}
		.container {border:1px solid red;width:300px;}
		#box1 {background-color:green;float:left;width:100px;height:100px;}
		#box2 {background-color:deeppink; float:right;width:100px;height:100px;}
		#box3 {background-color:pink;height:40px;}
	</style>
	</head>
	<body>
		<div class="container">
			<div id="box1">box1 向左浮动</div>
			<div id="box2">box2 向右浮动</div>
		</div>
		<div id="box3">box3</div>
	</body>
	</body>
</html>

在这里插入图片描述
4.清除浮动:为了防止浮动溢出的出现而进行的CSS处理,就叫CSS清除浮动

在非IE浏览器下,当容器高度为auto且容器内容中有float的元素,容器高度不能自动伸长以适应内容的高度,使内容溢出到容器外而影响布局的现象叫浮动溢出

(1)在标签中加入clear属性:

clear:none/left/right/both
#none:允许两边都可以有浮动对象;默认值
#left:不允许左边有浮动对象
#right:不允许右边有浮动对象
#both:不允许两侧有浮动对象

#注意:clear属性只对自身起作用,不影响其他元素
#如果某元素A的右侧有一浮动对象,而A设置了clear:right
#则A会自动下移一格,达到本元素右边没有浮动对象的目的

在这里插入图片描述

(2)利用伪类+clear属性:推荐

.clearfix:after {/*在类名为clearfix的元素内的最后加入内容*/ 
content:"";      /*内容为""*/
display:block;   /*将加入的元素转换为块级元素*/ 
clear:both;      /*清除左右两边浮动*/
#visibility:hidden;
/*可见度设为隐藏;注意和display:none;有区别:visibility:hidden;仍然占据空间,只是看不到而已*/ 
line-height:0;   /*行高为0*/ 
height:0;        /*高度为0*/ 
font-size:0;     /*字体大小为0*/#}
# #间内容非必需

.clearfix { *zoom:1;}
/*这是针对于IE6的:因为IE6不支持after伪类*/
/*这个神奇的zoom:1让IE6的元素可以清除浮动来包裹内部元素*/

在这里插入图片描述

整段代码相当于在浮动元素后跟了个宽高为0的空div,然后设定它clear:both来达到清除浮动的效果
不必在html文件中写入大量无意义的空标签
只需写一个.clearfix,然后在需要清除浮动的元素中添加clearfix类名,这样利于维护

如:<div class="head clearfix"></div>

(3)利用overflow:局限性较大
参见:https://blog.csdn.net/qq_41638795/article/details/83304388

.container {...;overflow:hidden;}
/*float元素的父元素添加overflow:hidden*/
#hidden的含义是超出给定宽高的部分会被隐藏(通常显示省略号)
#float的元素虽然不在普通流中,但是是浮动在普通流上的
#可以把普通流元素+浮动元素想象成一个立方体
#如果没有明确设定包含容器高度的情况下,它要计算内容的全部高度才能确定在什么位置hidden
#这样浮动元素的高度就要被计算进去,容器就会被撑开,清除浮动

三.定位position属性
1.position的4个值:

标签 {position:提供的值;left/right/top/bottom:数值;}

position:static;
#无定位,不能当作绝对定位的参照物;默认值
#设置标签对象的left等属性不起作用
##########################################################
position:relative;
#相对定位:以自身在文档流中的原始位置为参照物
#即使设定了相对定位及偏移值,元素还占有原来位置,即占据文档流空间
#对象遵循正常文档流(物理位置不变),但视觉位置将依据top等属性在正常文档流中偏移
#层叠通过z-index属性定义
#一个主要用法:方便绝对定位元素找到参照物
#基于margin左上角定位
##########################################################
position:absolute;
#绝对定位:相对于最近的已定位祖先元素定位
#设置为绝对定位的元素框从文档流完全删除
#如果没有已定位的祖先元素,相对于最初的包含块(即body元素)定位
#原先在正常文档流中所占的空间会关闭,就像该元素原来不存在一样
#元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框
#层叠通过z-index属性定义
#内联标签设为position:absolute后,可设置width/height
#基于padding定位

重点:如果父级设置了position属性,如position:relative;
那么子元素就会以父级的左上角为原始点进行定位
这样能很好的解决自适应网站的标签偏离问题,即父级为自适应的
那子元素就设置position:absolute;父元素设置position:relative;
然后top等用百分比宽度表示
#########################################################
position:fixed
#对象脱离正常文档流,使用top等属性以窗口为参考点进行定位
#被定位于浏览器窗口的一个指定坐标
#当出现滚动条时,不论是否滚动,都会固定在窗口的这个位置
#层叠通过z-index属性定义
##########################################################
#一个元素设置了position:absolute/fixed;就不能设置float
#因为这是两个不同的流,'浮动流'与'定位流'
#但是position:relative可以,因为它原本所占的空间仍占据文档流
##########################################################
left/right/top/bottom:像素值/百分比;
#移动后位置在左/右/上/下方向距离原位置指定值(面向屏幕)
#相当于移动到指定参照物右/左/下/上方向指定值的位置

2.仅使用margin属性布局position:absolute;的元素:

此情况下margin-right/bottom不再对文档流中的元素产生影响,因为该元素已经脱离了文档流,无法以未脱离文档流的元素作为参照物设置距离
另外,不管它的祖先元素有没有定位,margin-top/left都是以原来在文档流中的位置作为参照物

下图中使用margin属性布局相对定位元素,层级关系为:

<div class='div1' position:relative>
<div class='div2' /*没有设置为定位元素，不是参照物*/>
<div class='div3' /*没有设置为定位元素，不是参照物*/>
<div class='box1'>
<div class='box2' position:absolute margin-top:50px margin-left:120px>
<div class='box3'>

在这里插入图片描述

EdVzAs

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
CSS 文档流定位(float,position)

一.文档流1.文档流:元素排版布局过程中,元素会自动从左往右,从上往下的流式排列2.block元素和inline元素在文档流中的排列方式:block元素通常被现实为独立的一块,独占一行,多个该类元素会各自新起一行;默认宽度自动填满父元素宽度;可设置width/height/margin/padding属性inline元素不会独占一行,多个相邻的行内元素会排列在同一行里,直到一行排列不下,...
复制链接

扫一扫