CSS-定位机制--决定盒子的摆放位置定位机制（文档流 浮动定位 层定位）2---浮动定位部分

最新推荐文章于 2024-05-12 14:23:18 发布
最新推荐文章于 2024-05-12 14:23:18 发布
阅读量198 收藏
点赞数 1
分类专栏： CSS 文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47295886/article/details/125810396
版权

2.浮动定位float,脱离文档流 让盒子浮动起来 left左浮动 right右浮动 none不浮动

应用：在图文混排的时候、多列布局

浮动时候原有的位置丢失，其他元素占据它的位置

clear:清除浮动

clear:both 清除两边浮动 left，right只能清除一个方向的浮动（实现单栏浮动）

none默认值

实现页面的 三行的结构

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>首页</title>

		<style type="text/css">
			/*将默认的样式清零*/
			*{
				padding: 0;
				margin: 0;
			}
			body{
				font-size: 14px;/*字号*/
			}
			#container{
				width: 1000px;
				margin: 50px auto;/*上下边距50，左右边距自动 及实现水平居中*/	
				height: 500px; /*一般高度可以由内容撑开，但是因为式空的所以为了显示设置*/
				background-color: blue;
			}
			#header{
				/*宽度默认继承父元素的宽度的100%			*/	
				height: 100px;
				background-color: red;
				margin-bottom: 5px;	
				
			}
			#main{
				/*宽度默认继承父元素的宽度的100%			*/	
				height: 330px;
				background-color: orange;
				margin-bottom: 5px;	
			}
			#footer{
				/*宽度默认继承父元素的宽度的100%			*/	
				height: 60px;
				background-color: green;
			}

		</style>

	</head>

	<body>
		<div id="container">
			<div id="header"></div>
			<div id="main"></div>
			<div id="footer"></div>
		</div>
		
	</body>

</html>

 实现页面的两列的结构：使用浮动布局

法一：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>首页</title>

		<style type="text/css">
			/*将默认的样式清零*/
			*{
				padding: 0;
				margin: 0;
			}
			body{
				font-size: 14px;/*字号*/
			}
			#container{
				width: 1000px;
				margin: 50px auto;/*上下边距50，左右边距自动 及实现水平居中*/	
				height: 500px; /*一般高度可以由内容撑开，但是因为式空的所以为了显示设置*/
				background-color: blue;
			}
			#aside{
				/*分左右 使用浮动布局*/
				float: left;
				width: 300px;
				height: 500px;
				background-color: orange;
			}
			#content{
				float: right;
				width: 685px;
				height: 500px; /*高度宽度一定要设置*/
				background-color: black;
			}
		</style>

	</head>

	<body>
		<div id="container">
			<div id="aside"></div>
			<div id="content"></div>
		</div>
		
	</body>

</html>

 法二:

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>首页</title>

		<style type="text/css">
			/*将默认的样式清零*/
			*{
				padding: 0;
				margin: 0;
			}
			body{
				font-size: 14px;/*字号*/
			}
			#container{
				width: 1000px;
				margin: 50px auto;/*上下边距50，左右边距自动 及实现水平居中*/	
				height: 500px; /*一般高度可以由内容撑开，但是因为式空的所以为了显示设置*/
				background-color: blue;
			}
			#aside{
				/*分左右 使用浮动布局*/
				float: left;
				width: 300px;
				height: 500px;
				background-color: orange;
				margin-right:15px ;
			}
			#content{
				float: left;
				width: 685px;
				height: 500px; /*高度宽度一定要设置*/
				background-color: black;
			}
		</style>

	</head>

	<body>
		<div id="container">
			<div id="aside"></div>
			<div id="content"></div>
		</div>
		
	</body>

</html>

 结合页面的3行两列：

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>首页</title>

		<style type="text/css">
				/*将默认的样式清零*/
			*{
				padding: 0;
				margin: 0;
			}
			body{
				font-size: 14px;/*字号*/
			}
			#container{
				width: 1000px;
				margin: 50px auto;/*上下边距50，左右边距自动 及实现水平居中*/	
				height: 500px; /*一般高度可以由内容撑开，但是因为式空的所以为了显示设置*/
				background-color: blue;
			}
			#header{
				/*宽度默认继承父元素的宽度的100%			*/	
				height: 100px;
				background-color: red;
				margin-bottom: 5px;	
				
			}
			#main{
				/*宽度默认继承父元素的宽度的100%			*/	
				height: 330px;
				background-color: #ccc;
				margin-bottom: 5px;	
			}
			#aside{
				/*分左右 使用浮动布局*/
				float: left;
				height: 330px;
				width: 300px;
				background-color: orange;
				margin-right: 10px;
			
			}
			#content{
				float: left;
				height: 330px;
				width: 690px;
				background-color: black;
			}
			#footer{
				/*宽度默认继承父元素的宽度的100%			*/	
				height: 60px;
				background-color: green;
			}
			
		</style>

	</head>

	<body>
		<div id="container">
			<div id="header"></div>
			<div id="main">
				<div id="aside"></div>
				<div id="content"></div>
			</div>
			<div id="footer"></div>
		</div>
		
	</body>

</html>

实现页面的四行三列：（alt+shfit+数字实现分栏 使用快捷键link:css引用样式表）

css部分

/*将默认的样式清零*/
*{
	padding: 0;
	margin: 0;
}
body{
	font-size: 14px;/*字号*/
}
#container{
	width: 1000px;
	margin: 50px auto;/*上下边距50，左右边距自动 及实现水平居中*/	
	height: 500px; /*一般高度可以由内容撑开，但是因为式空的所以为了显示设置*/
	background-color: blue;
}
#header{
	/*宽度默认继承父元素的宽度的100%			*/	
	height: 100px;
	background-color: red;
	margin-bottom: 5px;	
	
}
#nav{
	height: 90px;
	background-color: orange;
	margin-bottom: 5px;	

}
#main{
	/*宽度默认继承父元素的宽度的100%			*/	
	height: 200px;
	background-color: #ccc;
	margin-bottom: 5px;	
}
.aside{
	/*分左右 使用浮动布局*/
	float: left;
	height: 200px;
	width: 190px;
	background-color: yellow;
}
#content{
	float: left;
	height: 200px;
	width: 600px;
	background-color: black;
	margin-right: 10px;
	margin-left: 10px;
}
#footer{
	/*宽度默认继承父元素的宽度的100%			*/	
	height: 100px;
	background-color: green;
}

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>首页</title>
		<link rel="stylesheet" href="css/style1.css">

	</head>

	<body>
		<div id="container">
			<div id="header"></div>
			<div id="nav"></div>
			<div id="main">
				<div id="aside1" class="aside"></div>
				<div id="content"></div>
				<div id="aside2" class="aside"></div>
			</div>
			<div id="footer"></div>
		</div>
		
	</body>

</html>

¡Venceremo
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS 定位之 z-index 问题分析
09-25
IE6/7对z-index的表现跟IE8及以上浏览器不一致。position值为非static时，如果不设置z-index属性，IE6/7下z-index默认为0，而IE8及以上浏览器z-index为auto，且zindex:auto的元素不参与堆叠优先级比较
CSS教程:网页布局定位及z-index解释
12-11
定位元素：position属性值设置除默认值static以外的元素，包括relative，absolute，fixed。平台：win/IE win/FF z-index 用来确定定位元素在垂直于显示屏方向（以下称为Z轴）上的层叠顺序 值：auto | 整数 | inherit...
浮动(Float)
无糖加冰
11-16 581
浮动(Float) 今天我们来讲以后网页布局中最最重要的一个知识点浮动. 我们都知道CSS提供了三种传统的布局方式: 标准流 浮动 定位(后面博客会给大家进行讲解,请及时关注!) 标准流 所谓的标准流就是标签按照规定好的方式排列利用块元素和行内元素进行标准流布局 浮动 在学习浮动之前,我们先来想想我们为什么需要浮动? 因为在网页中有很多的布局效果,只使用标准流没有办法完成,此时我们就需要利用浮动来完成布局 浮动的作用 浮动可以改变网页中标签的默认排列方式 浮动的应用 在浮动中最
【前端学习】前端学习第六天：盒子的浮动和定位详解
qq_49916504的博客
03-17 1778
一、浮动 float 通过浮动可以使一个元素向其父元素的左侧或右侧移动； 下面来介绍float的这三个属性值： 1、none：默认值，元素不浮动； 2、left：元素向左浮动； 3、right：元素向右浮动。 浮动的特点： 1、元素设置浮动后，水平布局的等式便不需要强制成立； 2、元素设置浮动后，将会从文档流中脱离，此后元素的一些特点也会发生改变。 脱离文档流的特点： 块元素： 1、块元素不再独占页面一行； 2、块元素的高度和宽度默认被内容撑开； 行内元素： 行内元素脱离文档流后
CSS-定位机制--决定盒子的摆放位置定位机制（文档流 浮动定位 层定位）3--层定位部分
weixin_47295886的博客
07-15 377
fixed：浏览器窗口（参照物）--盒子不随下滑线的移动而移动 relative：这个元素的直接父元素（参照物）--针对自己的父元素，脱离文档流，但是原来的文档流的位置保留，下面的static元素没有去占据位置 absolute：相对于绝对或者相对的父元素（参照物）--脱离文档流，原来的位置会丢失，下面的static的元素会上去占据它的位置--如果父层没有，则相对body 实现子元素跟随父元素的移动而移动...
调整盒子位置的方式
weixin_小白鼠的博客
07-06 2239
调整盒子位置的方式 1 边距margin/padding： 标准流内调整, 注意可能存在盒子塌陷的问题 2 弹性布局flex： flex布局之后，就不用考虑盒子类型的概念了，行内元素也可以直接设置宽高了 3 浮动float: 特点：脱离标准流，不再保留原来的位置，其他盒子可能会占有它原来的位置 缺点：无法撑开父盒子，脱标不占位，可能与其他内容重叠 清除浮动：清楚浮动带来的影响，多种方法，给父盒子设置高度、clear:both、伪元素 4 定位position： 绝对定位的特点：脱离标准流，不再保留原来的位置
前端css基础（二）布局定位三种方式 文档流,浮动,层定位 clear
踟蹰千年的博客
12-10 1762
对盒子进行定位定位方式分为三类：（1）文档流（2）浮动定位（3）层定位 文档流flow 默认的方式，相当于平常写字一样，从上到下，从左到右 浮动定位float 想要盒子并列排列一般采用浮动定位 层定位layer 使用position属性设定，像图层一样前后层叠在一起 一.文档流flow 文档元素分类 block,inline,inline-block 1.block元素 ...
CSS background-position 属性 定位图片
09-25
看别人代码发现一个背景图中有很多图片，大家可以参考下原理
CSS中背景background-position负值定位深入理解[图文]
09-25
CSS中背景定位background-position负值一直是不好理解的难点，一方面用的比较少，另一方面的理解的不够深入，今天花了点时间认真的思考了，把我的心得写出来
关于对同一个盒子同时设置相对定位和浮动或者绝对定位和浮动的问题
她夏了夏天
12-13 9635
可能细心的朋友在查看某些网页的时候发现，某些盒子或是图片既设置了相对定位又设置了浮动，觉得很奇怪，其实呢，这个设置是非常的正常。    比如，在布局页面的时候，我希望导航和轮播图一左一右的进行显示，就可以对导航设置左浮动float。轮播图右浮动。但是呢、如果导航里面有些小图标之类的东西要进行绝对定位absolute操作时，那么就可以对该导航设置相对定位relative了，相当于小图标的已定位的祖
CSS 定位机制小结:文档流、浮动和层定位
m0_48907853的博客
05-06 378
CSS 定位机制小结:文档流、浮动和层定位 文章目录 前言 一、pandas是什么？ 二、使用步骤 1.引入库 2.读入数据 总结 前言 css定位机制：①文档流flow （display属性）②浮动float （float和clear属性）③层定位layer（position属性） 一、Flow 文档流定位方式：block、inline、inline-block 1.block元素： 块元素特点：独占一行以矩形区域显示，可以设置元素的height、widt...
文档流、文本流、定位流、浮动流、脱离文档流
DOM曼珠沙华的博客
05-23 4439
文档流 文档流(Normal flow)也称为常规流，普通流。 从直观上理解，常规流指的是元素按照其在 HTML 中的位置顺序决定排布的过程,主要的形式是自上而下（块级元素）,一行接一行,每一行从左至右（行内元素）。 内联元素不会独占一行，而每个非浮动块级元素都独有一行, 浮动元素则按规则浮在行的一端. 若当时行容不下, 则另起新行再浮动。浮动元素不占任何正常文档流空间，而浮动元素的定位照样基于正常的文档流，当一个元素脱离正常文档流后，依然在文档流中的其他元素将忽略该元素并填补其原先的空间。 文本流
CSS定位机制——文档流
One of thre_tigers的博客
01-11 657
CSS的定位机制用来对页面元素（盒子）进行排版，找到每一个页面元素的位置，确定每一个元素的位置。主要有三种定位方式： 文档流定位，浮动定位和层定位。 1.文档流定位： 是一种默认的情况，不需要额外的设置，每一种元素在当前网页上按次序排列，有些元素独占一行或与其他元素在一行依次显示. 2.浮动定位： 当我们想要让一个大盒子里面的元素并排排列的时候，这个时候就要用到浮动，让元素浮动起来，分别向左向...
CSS定位机制-文档流定位
kenny.feng
04-14 309
CSS定位机制（布局模型）： （1）文档流：默认方式，从左到右，从上到下 （2）浮动定位：脱离文档流，浮动起来但不层叠 （3）层定位：相互层叠 如图： 文档流定位 概念：元素的位置“可层叠”。也称为“层布局模型” 本质：相对于谁定位，且先浮动起来，再定位 分类： 1.块级元素：block 2.内联元素：inline。行内元素 3.内联块状元素：inline-bloc...
CSS中盒子的浮动定位
evoluyi的博客
04-07 1262
CSS中盒子的浮动与定位 1. 盒子的浮动 在标准流中,一个块级元素在水平方向会自动伸展，知道包含它的元素的边接；而在竖直方向与相邻元素依次排列，不能并排。 CSS中float属性，默认为none。将float属性的值设置为left或right，元素就会向其父元素的左侧或右侧靠紧。同时默认情况下，盒子的宽度不再伸展，而是根据盒子里面的内容的宽度来决定。 float: left | righ
BFC，包含块，文档流，浮动，定位是个啥关系---CSS视觉格式化模型
weixin_33682719的博客
12-30 255
CSS视觉格式化模型 浏览器在解析渲染我们所写的html内容，顺序渲染（普通文档流）。 <body> <div>1</div> <div>2</div> <div>3</div> <div>4</div...
1.文档流、浮动 、定位的概念总结
宋坚强大大~~
04-21 1041
文档流、浮动 、定位的概念1.文档流 - 所有的元素默认情况下都是在文档流中存在的 - 文档流是网页的最底层 - 元素在文档流中的特点： - 块元素 1.默认宽度是父元素的全部 2.默认高度被内容（子元素）撑开 3.在页面中自上而下垂直排列 - 内联元素 1.默认高度和宽度都被内容撑开 2.在页面中自左向右水平排列，如果一行不足以容下所有的元素 则换到下一行继续从左向...
关于浮动窗口占位的问题
liuxc的专栏
11-28 2941
关于浮动窗口占位的问题 一旦盒子被标记为浮动　　　这个盒子就脱离了ＤＯＭ　　父亲盒子的高度不会跟着浮动子盒子变得 你想让父亲盒子包住子盒子可以这样 再加个子盒子在2个浮动盒子下面 XML/HTML code ? 1 2 3 4 5 div id="father">   div style="float:left">float1div>   div style="float
picoCTF-Web Exploitation-Web Gauntlet
最新发布
huckers的博客
05-12 466
按照提示，需要用admin登录，查看filter.php，这应该是一个SQL注入题，提示我们可以使用无痕浏览器来以便cookie可以不用每次清除。中展示了sql过滤逻辑，可以回味一下，尝试用不同的关键字来注入。提示sql过滤or，我们使用。
css el-row 如何让某几个el-col绝对定位始终位于最左侧
07-09
要让某几个 `el-col` 绝对定位始终位于最左侧，你可以使用 CSS 的绝对定位属性来实现。...请注意，使用绝对定位时，被定位元素会脱离文档流，可能会影响其他元素的布局。确保你的布局适应这些列的绝对定位。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值