CSS-盒子的浮动与定位

最新推荐文章于 2023-08-02 13:06:31 发布
原创 最新推荐文章于 2023-08-02 13:06:31 发布 · 820 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了CSS中的浮动(float)、清除浮动的影响(clear)、定位(position)以及z-index和display属性。通过实例展示了如何使用float实现左右浮动，利用clear防止元素因浮动而影响布局，position属性用于相对、绝对和固定定位，z-index控制元素的堆叠顺序，display属性则用于切换元素的显示方式。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1、盒子浮动 float
Float 属性：
默认是 none ，按照标准流来定位；
Left：左悬浮；
Right：右悬浮；


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒子浮动float none</title>
<style type="text/css">
	.parent{
		padding:5px;
		background-color: yellow;
		border: 1px solid red;
	}
	
	.d1{
		float:none;
		margin:5px;
		background-color: gray;
		border: 1px solid gray;
	}
	
	.d2{
		margin:5px;
		background-color: blue;
		border: 1px solid blue;
	}
	
	p{
		margin:5px;
		background-color: green;
		border: 1px solid green;
	}
</style>
</head>
<body>
<div class="parent">
	<div class="d1">盒子A</div>
	<div class="d2">盒子B</div>
	<p>Java是一种可以撰写跨平台应用软件的面向对象的程序设计语言，是由Sun Microsystems公司于1995年5月推出的Java程序设计语言和Java平台（即JavaSE, JavaEE, JavaME）的总称。Java 技术具有卓越的通用性、高效性、平台移植性和安全性，广泛应用于个人PC、数据中心、游戏控制台、科学超级计算机、移动电话和互联网，同时拥有全球最大的开发者专业社群。在全球云计算和移动互联网的产业环境下，Java更具备了显著优势和广阔前景。</p>
</div>
</body>
</html>

运行结果：
在这里插入图片描述


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒子浮动float left</title>
<style type="text/css">
	.parent{
		padding:5px;
		background-color: yellow;
		border: 1px solid red;
	}
	
	.d1{
		float:left;
		margin:5px;
		background-color: gray;
		border: 1px solid gray;
	}
	
	.d2{
		margin:5px;
		background-color: blue;
		border: 1px solid blue;
	}
	
	p{
		margin:5px;
		background-color: green;
		border: 1px solid green;
	}
</style>
</head>
<body>
<div class="parent">
	<div class="d1">盒子A</div>
	<p>Java是一种可以撰写跨平台应用软件的面向对象的程序设计语言，是由Sun Microsystems公司于1995年5月推出的Java程序设计语言和Java平台（即JavaSE, JavaEE, JavaME）的总称。Java 技术具有卓越的通用性、高效性、平台移植性和安全性，广泛应用于个人PC、数据中心、游戏控制台、科学超级计算机、移动电话和互联网，同时拥有全球最大的开发者专业社群。在全球云计算和移动互联网的产业环境下，Java更具备了显著优势和广阔前景。</p>
	<div class="d2">盒子B</div>
</div>
</body>
</html>

运行结果：
在这里插入图片描述


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒子浮动float right</title>
<style type="text/css">
	.parent{
		padding:5px;
		background-color: yellow;
		border: 1px solid red;
	}
	
	.d1{
		float:left;
		margin:5px;
		background-color: gray;
		border: 1px solid gray;
	}
	
	.d2{
		float:right;
		margin:5px;
		background-color: blue;
		border: 1px solid blue;
	}
	
	p{
		margin:5px;
		background-color: green;
		border: 1px solid green;
	}
</style>
</head>
<body>
<div class="parent">
	<div class="d1">盒子A</div>
	<div class="d2">盒子B</div>
	<p>Java是一种可以撰写跨平台应用软件的面向对象的程序设计语言，是由Sun Microsystems公司于1995年5月推出的Java程序设计语言和Java平台（即JavaSE, JavaEE, JavaME）的总称。Java 技术具有卓越的通用性、高效性、平台移植性和安全性，广泛应用于个人PC、数据中心、游戏控制台、科学超级计算机、移动电话和互联网，同时拥有全球最大的开发者专业社群。在全球云计算和移动互联网的产业环境下，Java更具备了显著优势和广阔前景。</p>
</div>
</body>
</html>

运行结果：
在这里插入图片描述
2、使用 clear 清除浮动的影响
Clear 属性：
默认是 none，允许两边都可以有浮动对象；
Left： 不允许左边有浮动对象
Right：不允许右边有浮动对象
Both：不允许有浮动对象


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用clear清除浮动的影响 none</title>
<style type="text/css">
	.parent{
		padding:5px;
		background-color: yellow;
		border: 1px solid red;
	}
	
	.d1{
		float:left;
		margin:5px;
		background-color: gray;
		border: 1px solid gray;
	}
	
	.d2{
		float:right;
		margin:5px;
		background-color: blue;
		border: 1px solid blue;
	}
	
	p{
		clear:none;
		margin:5px;
		background-color: green;
		border: 1px solid green;
	}
</style>
</head>
<body>
<div class="parent">
	<div class="d1">盒子A</div>
	<div class="d2">盒子B</div>
	<p>Java是一种可以撰写跨平台应用软件的面向对象的程序设计语言，是由Sun Microsystems公司于1995年5月推出的Java程序设计语言和Java平台（即JavaSE, JavaEE, JavaME）的总称。Java 技术具有卓越的通用性、高效性、平台移植性和安全性，广泛应用于个人PC、数据中心、游戏控制台、科学超级计算机、移动电话和互联网，同时拥有全球最大的开发者专业社群。在全球云计算和移动互联网的产业环境下，Java更具备了显著优势和广阔前景。</p>
</div>
</body>
</html>

运行结果：
在这里插入图片描述


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用clear清除浮动的影响 left</title>
<style type="text/css">
	.parent{
		padding:5px;
		background-color: yellow;
		border: 1px solid red;
	}
	
	.d1{
		float:left;
		margin:5px;
		background-color: gray;
		border: 1px solid gray;
	}
	
	.d2{
		float:right;
		margin:5px;
		height:50px;
		background-color: blue;
		border: 1px solid blue;
	}
	
	p{
		clear:left;
		margin:5px;
		background-color: green;
		border: 1px solid green;
	}
</style>
</head>
<body>
<div class="parent">
	<div class="d1">盒子A</div>
	<div class="d2">盒子B</div>
	<p>Java是一种可以撰写跨平台应用软件的面向对象的程序设计语言，是由Sun Microsystems公司于1995年5月推出的Java程序设计语言和Java平台（即JavaSE, JavaEE, JavaME）的总称。Java 技术具有卓越的通用性、高效性、平台移植性和安全性，广泛应用于个人PC、数据中心、游戏控制台、科学超级计算机、移动电话和互联网，同时拥有全球最大的开发者专业社群。在全球云计算和移动互联网的产业环境下，Java更具备了显著优势和广阔前景。</p>
</div>
</body>
</html>

运行结果：
在这里插入图片描述


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用clear清除浮动的影响 right</title>
<style type="text/css">
	.parent{
		padding:5px;
		background-color: yellow;
		border: 1px solid red;
	}
	
	.d1{
		float:left;
		margin:5px;
		height:100px;
		background-color: gray;
		border: 1px solid gray;
	}
	
	.d2{
		float:right;
		margin:5px;
		height:50px;
		background-color: blue;
		border: 1px solid blue;
	}
	
	p{
		clear:right;
		margin:5px;
		background-color: green;
		border: 1px solid green;
	}
</style>
</head>
<body>
<div class="parent">
	<div class="d1">盒子A</div>
	<div class="d2">盒子B</div>
	<p>Java是一种可以撰写跨平台应用软件的面向对象的程序设计语言，是由Sun Microsystems公司于1995年5月推出的Java程序设计语言和Java平台（即JavaSE, JavaEE, JavaME）的总称。Java 技术具有卓越的通用性、高效性、平台移植性和安全性，广泛应用于个人PC、数据中心、游戏控制台、科学超级计算机、移动电话和互联网，同时拥有全球最大的开发者专业社群。在全球云计算和移动互联网的产业环境下，Java更具备了显著优势和广阔前景。</p>
</div>
</body>
</html>

运行结果：
在这里插入图片描述


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>使用clear清除浮动的影响 both</title>
<style type="text/css">
	.parent{
		padding:5px;
		background-color: yellow;
		border: 1px solid red;
	}
	
	.d1{
		float:left;
		margin:5px;
		height:100px;
		background-color: gray;
		border: 1px solid gray;
	}
	
	.d2{
		float:right;
		margin:5px;
		height:50px;
		background-color: blue;
		border: 1px solid blue;
	}
	
	p{
		clear:both;
		margin:5px;
		background-color: green;
		border: 1px solid green;
	}
</style>
</head>
<body>
<div class="parent">
	<div class="d1">盒子A</div>
	<div class="d2">盒子B</div>
	<p>Java是一种可以撰写跨平台应用软件的面向对象的程序设计语言，是由Sun Microsystems公司于1995年5月推出的Java程序设计语言和Java平台（即JavaSE, JavaEE, JavaME）的总称。Java 技术具有卓越的通用性、高效性、平台移植性和安全性，广泛应用于个人PC、数据中心、游戏控制台、科学超级计算机、移动电话和互联网，同时拥有全球最大的开发者专业社群。在全球云计算和移动互联网的产业环境下，Java更具备了显著优势和广阔前景。</p>
</div>
</body>
</html>

运行结果：
在这里插入图片描述
3、盒子定位 position
Position 属性：默认是 static，按照标准流来定位；
Relative：相对定位，相对于原本的标准位置偏移指定的距离；
Absolute：绝对定位，以它的包含框为基准进行偏移；
Fixed：固定定位，以浏览器窗口为基准进行定位；


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒子定位position static</title>
<style type="text/css">
	.parent{
		padding:15px;
		background-color: green;
		border: 1px solid red;
	}
	
	.son{
		position:static;
		padding:10px;
		background-color: blue;
		border: 1px solid gray;
	}
	
</style>
</head>
<body>
<div class="parent">
	<div class="son">儿子</div>
</div>
</body>
</html>

运行结果：
在这里插入图片描述


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒子定位position relative</title>
<style type="text/css">
	.parent{
		padding:15px;
		background-color: green;
		border: 1px solid red;
	}
	
	.son{
		position:relative;
		left:30px;
		top:30px;
		padding:10px;
		background-color: blue;
		border: 1px solid gray;
	}
	
</style>
</head>
<body>
<div class="parent">
	<div class="son">儿子</div>
</div>
</body>
</html>

运行结果：
在这里插入图片描述


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒子定位position absolute</title>
<style type="text/css">
	.parent{
		position:relative;
		padding:15px;
		background-color: green;
		border: 1px solid red;
	}
	
	.son{
		position:absolute;
		left:0px;
		top:0px;
		padding:10px;
		background-color: blue;
		border: 1px solid gray;
	}
	
</style>
</head>
<body>
<div class="parent">
	<div class="son">儿子</div>
</div>
</body>
</html>

运行结果：
在这里插入图片描述


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒子定位position fixed</title>
<style type="text/css">
	.parent{
		position:relative;
		padding:15px;
		background-color: green;
		border: 1px solid red;
	}
	
	.son{
		position:fixed;
		left:0px;
		top:0px;
		padding:10px;
		background-color: blue;
		border: 1px solid gray;
	}
	
</style>
</head>
<body>
<div class="parent">
	<div class="son">儿子</div>
</div>
</body>
</html>

运行结果：
在这里插入图片描述
4、z-index 空间位置


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>z-index空间位置</title>
<style type="text/css">
	img{
		position: fixed;
		top: 0px;
		left: 0px;
		z-index: -1;
	}
	
</style>
</head>
<body>
<h1>这是一个苹果！</h1>
<h1>这是一个苹果！</h1>
<h1>这是一个苹果！</h1>
<h1>这是一个苹果！</h1>
<h1>这是一个苹果！</h1>
<h1>这是一个苹果！</h1>
<img src="../apple.jpg"/>
</body>
</html>

运行结果：
在这里插入图片描述
5、盒子 display 属性
Display：
Inline：把元素变成内联元素；
Block：把元素变成块级元素；


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>盒子display属性</title>
</head>
<body>
<div  style="display: inline;">d1</div>
<div  style="display: inline;">d2</div>
<div  style="display: inline;">d3</div>
<span style="display: block;">s1</span>
<span style="display: block;">s2</span>
<span style="display: block;">s3</span>
</body>
</html>

运行结果：
在这里插入图片描述

CSS（九）——盒子的浮动与定位
程序员的时光
03-14 1672
目录 1.盒子浮动 float 2.使用clear清除浮动的影响; 2.1不允许左边有浮动对象； 2.2不允许右边有悬浮对象； 2.3左右都不允许有浮动对象； 3.盒子定位position； 3.1.Relative：相对定位，相对于原本的标准位置偏移指定的距离； 3.2.Absolute：绝对定位，以它的包含框为基准进行偏移； 3.3.Fixed：固定定位，以浏览器窗口为基准...
CSS盒子、浮动、定位
Monkey_nini的博客
07-19 317
Emmet语法 快速生成html结构语法： 直接写上标签名 标签名*n，n为生成多少个相同的标签 父子级关系的标签，可以用> 兄弟级关系的标签，可以用+ 如果生成class，标签名.类名 如果生成id，标签名#id名 （.类名或者是#id名，都是默认标签是div） div类名是有顺序的可以用$，表示从1开始自增，一般是搭配* 标签内部的内容可以用{}来表示 快速生成CSS样式语法： 采取...
CSS(八) 盒子的浮动与定位
hlfsunshine的专栏
10-07 909
盒子浮动float Float 属性： 默认是none ，按照标准流来定位； Left：左悬浮； Right：右悬浮； html> head> meta charset="UTF-8"> title>盒子浮动float nonetitle> style type="text/css"> .parent{ padding:5px; backgr
css盒子的浮动与定位
草根
02-18 512
1. 盒子浮动 float Float 属性： 默认是 none ，按照标准流来定位； Left：左悬浮； Right：右悬浮；   2. 使用 clear 清除浮动的影响 Clear 属性： 默认是 none，允许两边都可以有浮动对象； Left： 不允许左边有浮动对象 Right：不允许右边有浮动对象 Both：不允许有浮动对象   3. 盒子定位 position...
CSS 盒模型详和盒子的浮动与定位和行级，快级元素
qq_40135955的博客
04-09 282
第一节：盒模型基本概念 盒模型： 相框边框 - > border 画和相框边框的距离 -> padding 相框之间的距离 -> marg border-width 边框宽度(粗细) border-color 边框颜色 border-style 边框样式 用 padding 设置内边距 用 margin 设置外边距 第二节：...
09第3章 CSS - 盒子模型与布局.zip
最新发布
10-14
在探讨CSS盒子模型与布局时，我们通常会涉及到一系列的核心概念，包括盒模型的基本组成部分、定位技术以及如何通过浮动来设计页面布局。本系列文件涵盖了这些主题的详细讲解和实践案例。 首先，盒模型是CSS布局的...
CSS进阶一（CSS+DIV的页面布局---浮动与定位）
qq_44872688的博客
10-15 2667
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引入库 代码
css-浮动，定位，溢出处理
Startpoupee的博客
03-18 410
浮动，定位
CSS元素的浮动与定位综合案例1源代码.pdf
07-10
本文档提供的“CSS元素的浮动与定位综合案例1”是一个关于如何使用CSS来创建画册式网页布局的实例，旨在帮助学习者深入理解CSS的浮动与定位概念。这个案例来源于喻浩的《DIV+CSS网页样式与布局从入门到精通》一书，...
3一面 3：CSS-HTML 知识点与高频考题解析.md
03-31
# 一面 3：CSS-HTML 知识点与高频考题解析 CSS 和 HTML 是网页开发中布局相关的组成部分，涉及的内容比较多和杂乱，本小节重点介绍下常考的知识点。 ## 知识点梳理 - 选择器的权重和优先级 - 盒模型 - 盒子大小...
CSS篇.day02-盒子模型, 浮动,定位
qq_54379580的博客
12-15 703
简单介绍了盒子模型, 浮动以及清除浮动影响, 定位~~~
盒子模型、浮动、定位
qq_53942010的博客
10-28 418
缺点： 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。缺点： 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。缺点： 内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。特征：浮动脱离标准流，不占位置，会影响标准流，浮动只有左右浮动。浮动后的元素不能超出父元素的内边距和边框。padding-bottom:下内边距。合并：嵌套的块元素在垂直外边距的合并。浮动后的元素会自动的转化为行内块元素。塌陷：相邻块元素垂直外边距的合并。
CSS 浮动(float)注意点
soindy
03-20 3049
浮动布局 浮动是一种半脱离标准流的排版方式 没有居中对齐 使用 margin: 0 auto; 没有作用 不区分块级元素/行内元素/行内块级元素,因为这标准流中的概念 浮动的排序规则 相同方向的浮动元素,先浮动的显示在前面.因为浮动只会盖住标准流. 不同方向的浮动元素,左浮找左浮,右浮找右浮 浮动元素浮动之后的位置,由浮动元素浮动之前在标准流中的位置来决定. 贴靠现象: 如果浮动的最后一个元素超过
CSS盒子模型与浮动定位
CYL_2021的博客
03-24 1859
文章目录一.CSS盒子模型1.1 盒子模型的组成1.2 边框（border）1.3 内边距（padding）1.4 外边距（margin）1.4.1 设置盒子水平居中1.4.2 外边距合并 页面布局要学习三大核心是：盒子模型, 浮动 和 定位. 一.CSS盒子模型 1.1 盒子模型的组成 盒子模型：就是把 HTML 页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。 CSS 盒子模型本质上是一个盒子，封装周围的 HTML 元素，它包括：元素内容（content），内边距（padding），边框
盒子的浮动与定位（上）
fonyer的博客
12-06 165
&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;&lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;&lt;head&gt;&lt;meta
盒子模型及其浮动、定位属性
m0_60316162的博客
08-02 356
3.每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。BFC只是一个规则，浮动不会影响其它BFC中元素的布局，而清除浮动只能清除同一BFC中在它前面的元素的浮动，一个完整的网页，是标准流、浮动、定位一起完成布局的，每个都有自己的专门用法。浮动的元素只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字（图片）会产生。5.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不影响外面的元素。
前端_CSS_03:盒子模型&浮动&定位
耳东er的博客
06-17 370
网页的格局：网页内容的主体规划 ——1. ⭐盒子模型：标签和标签存在包含关系时，位置的调整 ——2. ⭐浮动：多个块标签处于同一行的位置处理问题 ——3. ⭐定位：块标签在页面指定位置的处理问题
HTML5盒模型、浮动和定位
qq_44240254的博客
03-03 1773
在此之前我们先了解一下块级元素和行内元素的区别 一、块级元素 1、总是从新的一行开始 2、高度、宽度都是可控的 3、宽度没有设置时，默认为100% 4、块级元素中可以包含块级元素和行内元素 二、行内元素 1、和其他元素都在一行 2、高度、宽度以及内边距都是不可控的 3、宽高就是内容的高度，不可以改变 4、行内元素只能行内元素，不能包含块级元素 三、盒模型 1、盒模型简单示意图 边框border： ...
详解CSS-05-浮动与定位
东东爱编码博客
05-07 536
文章目录一、浮动1. 浮动的基本概念2. 使用浮动实现网页布局3. BFC规范和浏览器差异4. 清除浮动二、定位1. 相对定位2. 绝对定位3. 固定定位 一、浮动 1. 浮动的基本概念 浮动的最本质功能：用来实现并排。 浮动使用要点：要浮动，并排的盒子都要设置浮动 父盒子要有足够的宽度，否则子盒子会掉下去。 子盒子会按顺序进行贴靠，如果没有足够空间，则会寻找再前一个兄弟元素 浮动的元素不再区分块级元素、行内元素，已经脱离了标准文档流，一律能够设置宽度和高度，即使它是span或者a标
CSS基础：浮动与定位详解
"本章主要介绍了CSS基础知识，包括CSS简介、引入CSS的方法、基本选择器、复合选择器以及盒子的浮动与定位等关键概念。CSS是层叠样式表的简称，用于设计网页样式，使网页呈现出丰富的效果。CSS可以应用于HTML、XHTML...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值