【网页设计】29：浮动与定位

原创 已于 2023-04-18 22:20:24 修改 · 2.6k 阅读 · 14 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端

于 2021-03-08 19:54:16 首次发布
本文详细讲解了浮动元素导致的高度塌陷问题，包括如何通过设置父元素高度、使用`overflow:hidden`和添加clear属性来修复。同时介绍了相对定位、绝对定位和固定定位的概念及其应用实例。

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

第29节：浮动和定位

在这里插入图片描述
在这里插入图片描述

1.浮动：
  • 浮动的概念：浮动让元素脱离标准文档流，添加了浮动的元素会向左 or 向右移动，改变元素显示位置
（1）浮动书写方式：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>第29节：浮动与定位</title>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
	</head>
	<body>
		<!-- 浮动：float:left/right/none -->
		<!-- 浮动：设置了浮动的元素会向左或者向右移动 -->
		
		<!-- 结论1：正常情况下父元素如果不设置高度，其高度是由子集撑开的 -->
		<div class="father">
			<div id="" class="son">1</div>
			<div id="" class="son">2</div>
			<div id="" class="son">3</div>
		</div>
	</body>
</html>

.father{
	width: 800px;
	border: 1px solid red;
}

.son{
	width: 100px;
	height: 100px;
	background-color: pink;
	border: 1px solid blue;
}

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>第29节：浮动与定位</title>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
	</head>
	<body style="background-color:#fffae8;">
		<!-- 浮动：float:left/right/none -->
		<!-- 浮动：设置了浮动的元素会向左或者向右移动 -->
		
		<!-- 结论1：正常情况下父元素如果不设置高度，其高度是由子集撑开的 -->
		<!-- 结论2：子元素书写了浮动后，父元素高度为0，造成高度塌陷 -->
		<div class="father">
			<div id="" class="son">1</div>
			<div id="" class="son">2</div>
			<div id="" class="son">3</div>
		</div>
	</body>
</html>

.father{
	width: 800px;
	border: 1px solid red;
}

.son{
	width: 100px;
	height: 100px;
	background-color: pink;
	border: 1px solid blue;
	/* 左浮动效果 */
	float: left;
}

在这里插入图片描述

（2）浮动造成高度塌陷解决方法：
  • 给父元素直接书写高度（需要计算高度）
.father{
	width: 800px;
	border: 1px solid red;
    /* 给父元素书写高度 */
	height:102px;
}

.son{
	width: 100px;
	height: 100px;
	background-color: pink;
	border: 1px solid blue;
	/* 左浮动效果 */
	float: left;
}

在这里插入图片描述

  • 给父元素书写overflow: hidden;
.father{
	width: 800px;
	border: 1px solid red;
	/* 给父元素书overflow:hidden */
	overflow: hidden;
}

.son{
	width: 100px;
	height: 100px;
	background-color: pink;
	border: 1px solid blue;
	/* 左浮动效果 */
	float: left;
}

在这里插入图片描述

  • 在最后一个设置浮动的元素下方书写空的div，然后添加行内样式clear:both/left/right;
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>第29节：浮动与定位</title>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
	</head>
	<body style="background-color:#fffae8;">
		<!-- 浮动：float:left/right/none -->
		<!-- 浮动：设置了浮动的元素会向左或者向右移动 -->
		
		<!-- 结论1：正常情况下父元素如果不设置高度，其高度是由子集撑开的 -->
		<!-- 结论2：子元素书写了浮动后，父元素高度为0，造成高度塌陷 -->
		<div class="father">
			<div id="" class="son">1</div>
			<div id="" class="son">2</div>
			<div id="" class="son">3</div>
			<!-- 最后一个元素下方书写div，然后添加一个行内样式clear:both; -->
			<div id="" style="clear: both;">
				
			</div>
		</div>
	</body>
</html>

在这里插入图片描述

2.定位
  • 定位的概念：元素根据参照物的不同来进行位置的设置

在这里插入图片描述

（1）相对定位：参照自身的位置
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>定位</title>
		<link rel="stylesheet" type="text/css" href="css/position.css"/>
	</head>
	<body>
		<!-- 1.相对定位：position:relative; -->
		<p>我是相对定位案例</p>
	</body>
</html>

*{
	margin: 0;
}
p{
	width: 400px;
	height: 400px;
	border: 1px solid red;
	/* 相对定位 */
	position:relative;
	/* top:上 bottom:下 left:左 right:右 */
	top: 20px;
	left: 20px;	
}

在这里插入图片描述

（2）绝对定位：参照对有定位设置的第一级父元素
  • case1：初始页面
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>定位</title>
		<link rel="stylesheet" type="text/css" href="css/position.css"/>
	</head>
	<body style="background-color:#fffae8;">
		<!-- 2.绝对定位：position:absolute; -->
		<div id="" class="father">
			<div id="" class="son">
				我是绝对定位案例
			</div>
		</div>
		
	</body>
</html>

*{
	margin: 0;
}
.father{
	width: 400px;
	height: 400px;
	border: 1px solid black;
}
.son{
	width: 100px;
	height: 100px;
	background-color: pink;
}

在这里插入图片描述

  • case2：给子元素设置绝对定位
*{
	margin: 0;
}
.father{
	width: 400px;
	height: 400px;
	border: 1px solid black;
}
.son{
	width: 100px;
	height: 100px;
	background-color: pink;
    /* 给子元素设置绝对定位 */
	position: absolute;
	left: 0;
	bottom: 0;
}

在这里插入图片描述

由于只给子元素设置了绝对定位，所以子元素以body为参考系处于浏览器窗口左下方

  • case3：给父元素设置相对定位
*{
	margin: 0;
}

.father{
	width: 400px;
	height: 400px;
	border: 1px solid black;
	/* 给父元素设置相对定位 */
	position: relative;
}
/* 给子类设置绝对定位 */
.son{
	width: 100px;
	height: 100px;
	background-color: pink;
	position: absolute;
	left: 0;
	bottom: 0;
}

在这里插入图片描述

给父元素书写了一个相对定位，所以子元素以父元素为参考系处于父元素左下方

（3）固定定位：参考浏览器窗口进行定位
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>定位</title>
		<link rel="stylesheet" type="text/css" href="css/position.css"/>
	</head>
	<body style="background-color:#fffae8;">
		<!-- 3.固定定位：position:fixed; -->
		<div id="" class="box">
			我是固定定位的案例
		</div>
		
	</body>
</html>

*{
	margin: 0;
}
body{
	height: 5000px;
}
.box{
	width: 100px;
	height: 200px;
	background-color: green;
	/* 固定定位 */
	position: fixed;
	top:300px;
	left:200px;
}

在这里插入图片描述

固定定位常见于浏览器的悬浮窗广告

3.悬浮与定位代码演示
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>悬浮与定位代码演示</title>
		<link rel="stylesheet" type="text/css" href="css/29节代码演示.css"/>
	</head>
	<body>
		<div id="" class="pro_box">
			<div class="item">
				<img src="img/img01.jpg" >
				<div class="zhezhao">
				</div>
			</div>
			
			<div class="item">
				<img src="img/img02.jpg" >
			</div>
			
			<div class="item">
				<img src="img/img03.jpg" >
			</div>
			
			<div class="item">
				<img src="img/img04.jpg" >
			</div>
			
			<div class="item">
				<img src="img/img05.jpg" >
			</div>
			
			<div class="item">
				<img src="img/img06.jpg" >
			</div>
		</div>
		
	</body>
</html>


.pro_box{
	width: 1200px;
	border: 1px solid red;
	overflow: hidden;/* 高度塌陷处理 */
}
.item{
	float: left;/* 浮动 */
	width: 380px;
	height: 230px;
	position: relative;/* 相对定位 */
}
.zhezhao{
	width: 380px;
	height: 230px;
	background-color: black;
	opacity: 0.5;/* opacity图层透明度 */
	position: absolute;/* 绝对定位 */
	left: 0;
	top: 0;
}
/* 鼠标滑过透明度变化交互效果 */
.item .zhezhao:hover{
	opacity: 0.2;
}

在这里插入图片描述

网页设计浮动和定位小总结
qq_43527959的博客
05-13 3274
1、元素的浮动属性float (让多个div占在同一行内) 浮动属性作为CSS的重要属性，被频繁地应用在网页制作中。所谓元素的浮动是指设置了浮 动属性的元素会脱离标准文档流的控制，移动到其父元素中相应位置的过程。在CSS中， 通过float属性来定义浮动，其基本语法格式如下： 选择器{float:属性值;} { left : 元素向左浮动 right : 元素向右浮动 none : 元素不浮动（默认值） } 2、清除浮动 （ 可以让盒子平行存在 ） 为了
简单的网页布局（浮动）
hjhjkg的博客
08-09 2531
浮动是怎么诞生的？浮动最初设计的目的并没那么多事儿，就只是用来实现文字环绕效果而已。但是早期的前端开发者发现：浮动的元素可以设置宽高并且可以内联排列，是介于inline和block之间的一个神奇的存在， 在inline-block出来之前，浮动大行其道。直到inline-block出来后，浮动也有它自己独特的使用场景。...
HTML浮动与定位
01-19
HTML浮动与定位
网页布局之CSS浮动与定位
qq_43537721的博客
05-09 565
CSS 提供了 3 种机制来设置盒子的摆放位置，分别是普通流、浮动和定位。
浮动&定位
最新发布
2401_86339792的博客
05-25 840
1.某个元素可以自由的在一个盒子内移动位置，并且压住其他盒子.2.当我们滚动窗口的时候，盒子是固定屏幕某个位置的。以上效果，标准流或浮动都无法快速实现，此时需要定位来实现。所以：1.浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子。2.定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中某个位置，并且可以压住其他盒子。在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用z-index来控制盒子的前后次序(z轴)
浮动与定位
qq_64469885的博客
04-27 480
在实际开发过程中，我们需要通过清除浮动来避免元素不按预期对齐，同时需要注意，使用定位会导致元素脱离文档流，可能会影响其他页面元素的布局。使用定位需要先指定元素的定位模式，可用的定位模式有 static（默认）、relative、absolute、fixed等。定位（position）是CSS中另一种定位方式，允许开发者使用top、bottom、left、right值来指定元素的位置，并且该位置是相对于其父元素或整个页面而言的。浮动（float）是CSS中的一种定位方式，用于指定元素在其容器中的位置。
Web网页设计之css_8. 浮动与定位
胖子胖子大胖子的博客
10-07 1663
一、浮动 浮动其实我们之前学习的时候接触过，就是使用 float 进行浮动，我们来看一下 然后我们来让这个 a2 进行向左浮动 可以看到，我们这个 BBB 一下子就靠到了这个 AAA 的右侧 这个就是 float 带来的效果，这里的 html 页面已经脱离了这个标准流 二、clear 效果 clear 是可以清理掉这个悬浮的样式，我们来使用一下 可以看到啊，我们让 a2 向左浮动，a3 向右浮动，但是不难发现，这个 p 段落其实也向上移动了，我们给 a4 添加样式，让他没有这个浮动
网页设计与开发的网页布局项目案例flex布局float浮动postion定位技术
06-24
通过学院展示网站介绍目前流行的flex布局技术、float浮动技术以及postion定位技术以及使用jq库实现图片轮播放大等效果。压缩包里面包括ppt、案例、项目源码等资料齐全。可用于简单的网页制作课程答辩等
浮动与定位技巧：打造美观网页布局
在网页设计中，HTML浮动与定位是构建复杂布局的关键技巧。浮动元素是CSS中的一种特性，允许元素脱离标准文档流，通常用于创建多列布局或者使文本环绕图像。在HTML中，浮动是通过`float`属性实现的，其基本语法为： ...
CSS元素的浮动与定位综合案例3.pdf
07-10
在CSS中，元素的浮动和定位是两种关键的技术，用于创建复杂的网页布局。在这个名为“蓝色多瑙河”的浪漫式网页布局案例中，它们被巧妙地结合使用以实现3行2列的布局。这个案例源自喻浩的《DIV+CSS网页样式与布局从...
css 相对定位 绝对定位 浮动 分析
09-25
本篇文章将深入探讨相对定位、绝对定位以及浮动的概念，这些都是网页设计中不可或缺的技能。 **相对定位（Relative Positioning）** 相对定位是CSS定位的基础，它允许元素在不改变其在正常文档流中的位置的情况下...
个人原创网页设计作业：HTML效果与初学者教程
网页设计是构建个人网站和主页的基石，它包含了对网站布局、内容组织、视觉效果以及用户交互方面的策划与实现。本项目中，网页设计的基础知识应涵盖以下几点： - 网页布局：了解如何使用HTML标签（如div、header、...
前端学习第六天-css浮动和定位
weixin_55702682的博客
03-01 1251
元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。在CSS中，通过float属性来定义浮动，其基本语法格式如下：选择器{float:属性值;属性值描述none元素不浮动（默认值）left元素向左浮动right元素向右浮动清除浮动的方式优点缺点额外标签法（隔墙法）通俗易懂，书写方便添加许多无意义的标签，结构化较差。父级overflow:hidden/auto/scroll;书写简单溢出隐藏父级after伪元素结构语义化正确。
CSS实现网页分栏布局的方法：绝对定位和浮动。
yihuliunian的博客
09-15 961
在CSS中，实现分栏布局有两种方法。 第一种方法是使用四种CSS定位选项（absolute 、static、relative和fixed）中的绝对定位（absolute positioning），它可以将文档中的某个元素从其原本位置上移除，并重新定位在期望的任何地点之上。 第二种则是使用CSS中的浮动（float）概念。 绝对定位或浮动都能够用来实现分栏效果。二者可以独立使用，也可以结合在一起，相辅相成。 1、绝对定位 绝对定位的优势在于，我们可以丝毫不差地精确控制任何元素的位置—这里面没有...
float定位
weixin_45846357的博客
11-13 708
浮动定位 1.浮动定位的概述 如果我将元素设置了浮动定位那么具备以下几个特点： 1.浮动元素脱离了普通的文档流不占据页面空间的其他没有浮动的元素会自动上前部位 2.浮动元素会停靠在父级元素的左边或者右边，或者停靠在其他已经浮动的元素的边缘上 3.浮动元素只会在当前行内浮动 4.浮动元素依然位于父元素内 5.让多个元素在一行内显示 2.语法：float： left（左...
CSS页面布局（浮动+定位）详解
Asitwas的博客
09-24 2503
CSS有三种基本定位机制：普通文档流、浮动、定位。 普通文档流中元素的位置由元素在HTML中的位置决定。
网站设计基础之浮动与定位
weixin_45740885的博客
04-25 270
网站设计基础之浮动与定位 一.元素的浮动 float属性 float属性具有三个值：left right none，为字面意思 清除浮动 clear 通常在float属性的使用要用到清除浮动的属性，因为在使用float的属性时一般会影响到其它元素的位置，一般是其父元素。 而clear属性一般有三个值：left right both，分别意思为去除左/右/两边浮动对其造成的影响。clear属性的使用是用在此元素被其它已经使用float元素属性造成影响的条件下。例如，当某一子元素对其父元素造成不必要的影响
html中浮动和定位（练习+知识点）
weixin_54107527的博客
04-14 3140
目录 定位 1、什么是脱离文档流 2、position定位 2.1 static定位 2.2 relative定位 2.3 absolute定位 2.4 fixed定位 2.5 sticky定位（存在兼容性问题） 层级属性z-index 浮动 定义： 取值： 作用： 特性： 浮动练习 定位 1、什么是脱离文档流 文档流指的是在元素排版过程中，元素会自动从上至下，从左往右流式排列，称为文档流 元素脱离文档流后，将不在文档流中占据空间，元素浮于文档流...
浮动、定位
李刚的学习专栏
02-24 2814
浮动盒将元素的左边界或右边界移动到包含块或者另一个浮动盒的边界。 相对定位（relative）：相对于自己原位置进行偏移，在文本流中的位置依然存在，不脱离文档流； 绝对定位（absolute）：对于position值不为static的第一位祖先元素来定位（未找到，则相对body元素），在正常流中的位置不在存在，脱离文档流； 固定定位（fixed）：一直位于可视窗口的指定位置，不受滚动条影响，脱离文档流。
李立超讲解网页布局：浮动与定位基础
网页的布局课程介绍PPT深入讲解了网页设计中至关重要的布局技巧，由讲师李立超主讲。本课程首先介绍了浮动布局作为网页布局的基础，它利用`float`属性来控制元素的位置。`float`有三种可选值：`none`、`left`和`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值