前端基础之CSS浮动和定位方式

合集 - 前端炒米粉(25)

1.前端基础之前端知识引入2024-03-18 2.前端基础之HTTP协议介绍2024-03-18 3.前端基础之HTML基础2024-03-18 4.前端基础之HTML进阶2024-03-18 5.前端基础之CSS基础2024-03-19 6.前端基础之CSS选择器2024-03-19 7.前端基础之CSS基本属性2024-03-19

8.前端基础之CSS浮动和定位方式2024-03-19

一、浮动

（1）概述

浮动是所有网站页面布局必备的可以将块儿级标签浮动起来脱离正常的文档流。

浮动是多个块儿级标签可以在一行显示(全部飘在了空中)
浮动的元素，没有块儿级一说，本身有多大浮起来之后也就只能占多大。
只要涉及到页面的布局，一般都是用浮动提前规划好

主要属性值为：left（左浮动）、none（不浮动）、right（右浮动）、inherit（继承父元素浮动），多用于网页排版。

属性值	描述
left	元素向左浮动。
right	元素向右浮动。
none	默认值。元素不浮动，并会显示在其在文本中出现的位置。

原理：使当前元素脱离普通流，相当于浮动起来一样，浮动的框可以左右移动，直至它的外边缘遇到包含框或者另一个浮动框的边缘

（2）浮动示例

内部元素因为浮动导致了外边框无法框柱内部元素

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
  <style>
    #d1 {
      height: 200px;
      width: 200px;
      background-color: red;
      float: left;  /*浮动  浮到空中往左边飘*/
    }
    #d2 {
      height: 200px;
      width: 200px;
      background-color: yellow;
      float: right;  /*浮动  浮到空中往右边飘*/
    }
  </style>
 
</head>
<body>
    <div id="d1"></div>
    <div id="d2"></div>
</body>
</html>

（3）浮动造成的影响

主要是会造成父标签塌陷的问题。

浮动后的元素可以设置宽度和高度等，也就是说元素浮动后会变成块级元素，但我更倾向于说元素变成inline-block类型的元素，即同时拥有块级与行内元素的特征。

因为浮动元素脱离了普通流，会出现一种高度坍塌的现象：原来的父容器高度是当前元素A撑开的，但是当A元素浮动后，脱离普通流浮动起来，那父容器的高度就坍塌（前提是父容器高度小于A元素高度）。

（4）解决浮动带来的影响

方式一：自己加一个div设置高度

直接写div然后写对应的长宽
内部再创建一个子标签，给一个固定高度，撑起外边框

 #d4 {
    height: 100px;
}

造成代码冗余，不推荐使用

方式二：利用clear属性

写div然后添加clear属性避免去查找长宽

 #d4 {
    clear: left;  /*该标签的左边(地面和空中)不能有浮动的元素，有的话会一直往下，直到没有*/
}

方式三：通用的解决浮动带来的影响方法(推荐使用)

在写HTML页面之前，先提前写好处理浮动带来的影响。
css代码：

 .clearfix:after{
    content: '';
    display: block;
    clear: both;
}

前端：

 之后只要标签出现了塌陷的问题就给该塌陷的标签加一个clearfix属性即可
<div id="d1" class="clearfix">
    <div id="d2"></div>
    <div id="d3"></div>
    <div id="d4"></div>
</div>

上述的解决方式是通用的，到哪都一样，并且名字就叫clearfix，强烈推荐使用

二、定位方式

（1）定位方式介绍

静态
- 所有的标签默认都是静态的(static)，无法改变位置
- 通过positon: static;指定，没有边偏移属性
相对定位 Relative Positioning (了解)
- 相对于标签原来的位置做移动(relative)
绝对定位 Absolute Positioning (常用)
- 相对于已经定位过的父标签做移动(如果没有父标签，那么就以body为参照)
- 当你不知道页面其他标签的位置和参数，只给了你一个父标签的参数，让你基于该标签做定位的时候，使用绝对定位。
固定定位 Fixed Positioning (常用)
- 相对于浏览器窗口固定在某个位置(eg: 网站右侧的小广告)

ps：浏览器是优先展示文本内容的，如果它发现文本内容被挡住了，会想方设法的找个位置展示出来。

（2）静态定位

在 CSS 中，静态定位（Static positioning）是元素的默认定位方式。当你没有显式地设置任何定位属性时，元素会以静态定位的方式显示在页面上。

静态定位的元素遵循文档流，按照它们在 HTML 中出现的顺序进行排列。它们不受 top、right、bottom 和 left 属性的影响，也不会相对于任何其他元素进行定位。

 .static-box {
    /* 默认为静态定位 */
}

总结来说，静态定位是元素的默认定位方式，它们在页面中按照文档流的顺序排列，不会相对于其他元素进行定位。

（3）相对定位

在 CSS 中，相对定位（Relative positioning）是一种定位方式，它允许你将元素相对于其正常位置进行移动，但不会影响其他元素的位置。相对定位的元素仍会占据原来的空间，只是在视觉上移动了。

特点：

相对于之前的位置进行移动
移动后，原来的位置以标准流的方式继续占有
移动后的盒子压住其它盒子

 .relative-box {
    position: relative;
     /* 相对定位 */
    /*  标签由static变为relative，它的性质就从原来没有定位的标签变成了已经定位过的标签 */
    /*  虽然你没有修改值，但是它的性质也已经改变了*/
    top: 20px;
    left: 30px;
}

在上面的示例中，.relative-box 类表示一个元素，设置了相对定位。通过 position: relative; 属性，该元素会相对于其原始位置向下移动 20 像素（top: 20px;）和向右移动 30 像素（left: 30px;）。

用途：

相对定位常用于微调元素的位置，使其相对于其正常位置进行微小调整，而不会影响其他元素的布局。相对定位的元素仍会占据其原始位置，因此在页面布局时需要注意周围元素的位置。

需要注意的是，相对定位不会改变元素在文档流中的位置，只是视觉上的移动。如果想要完全脱离文档流并进行绝对定位，可以考虑使用绝对定位（position: absolute;）或固定定位（position: fixed;）属性。

（4）绝对定位

在 CSS 中，绝对定位（Absolute positioning）是一种常用的定位方式，它允许你将元素相对于其最近的已定位祖先元素进行定位，而不是相对于文档流。

特点：

移动盒子的时候，如果没有祖先盒子，或祖先盒子没有定位，则相对浏览器(非视口)的边线进行偏移
如果祖先盒子有定位(相对、绝对、固定)，则相对最近一级的祖先盒子边线进行偏移。所以通常给父盒子相对定位但不给偏移量，这样既不造成父盒子的移动，又可以使子盒子形成绝对定位
绝对定位的盒子不占有原来的位置，但会压住其它盒子

示例：

当你不知道页面其他标签的位置和参数，只给了你一个父标签的参数，让你基于该标签做定位

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            margin: 0;
        }
 
        #d3 {
            height: 100px;
            width: 200px;
            background-color: blue;
            position: relative; /* 从静态标签变为已经移动过的标签 */
        }
 
        #d4 {
            height: 200px;
            width: 400px;
            background-color: yellow;
            position: absolute; /* 绝对定位 */
            left: 220px;
            top: 110px;
        }
    </style>
</head>
<body>
<div id="d3">
    <div id="d4"></div>
</div>
</body>
</html>

用途：

绝对定位的元素脱离了文档流，不再占据原始位置，因此周围元素会表现得好像该元素从页面中消失了一样。这种定位方式常用于创建浮动菜单、弹出框等需要脱离文档流的元素。

需要注意的是，绝对定位的元素会相对于其最近的已定位祖先元素进行定位，如果没有已定位的祖先元素，则相对于文档的初始包含块（initial containing block）进行定位。

（5）固定定位

在 CSS 中，固定定位（Fixed positioning）是一种常用的定位方式，它允许你将元素相对于浏览器窗口进行定位，即无论用户如何滚动页面，该元素都会保持在固定的位置。

特点：

固定定位的盒子固定在浏览器视口的某个位置，压住其它盒子。浏览器上下滚动时，盒子的位置不变
边偏移是相对于视口的边线来移动
固定定位的盒子不占有原来的位置
固定定位的盒子需要有宽度

示例：

盒子固定在另一个盒子的右侧

 <!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>test title</title>
    <style>
        .fix-box {
            width: 100px;
            height: 100px;
            background-color: yellow;
            position: fixed;  /*写了fixed之后，定位就是根据浏览器窗口*/
 
            /*盒子固定在另一个盒子的右侧*/
            top: 100px;
            left: 50%;
            margin-left: 400px;
        }
 
        .median {
            width: 800px;
            height: 1000px;
            background-color: red;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<div class="fix-box"></div>
<div class="median"></div>
</body>
</html>

用途：

固定定位的元素会随着用户滚动页面而保持在固定位置，这种定位方式常用于创建固定的导航栏、广告条等需要始终可见的元素。

需要注意的是，固定定位的元素是相对于浏览器窗口定位的，因此不会随着页面的其余内容滚动而移动，而是始终固定在指定位置。

三、验证浮动和定位是否脱离文档流

脱离文档流：发生移动后是否还会占有原来的位置

（1）不脱离文档流

相对定位

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
 
<div style="height: 200px;width: 300px; background-color: red;position: relative;left: 500px;"></div>
<div style="height: 200px;width: 300px; background-color: green"></div>
 
</body>
</html>

（2）脱离文档流

要验证浮动和定位是否脱离文档流，你可以创建一个包含浮动元素和定位元素的示例，并观察它们对文档流的影响。

在这个示例中，.float 类表示一个浮动元素，.absolute 类表示一个绝对定位的元素。

浮动
绝对定位

 <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Floating and Positioning</title>
<style>
    .float {
        float: left;
        width: 100px;
        height: 100px;
        background-color: red;
    }
 
    .absolute {
        position: absolute;
        top: 50px;
        left: 50px;
        width: 100px;
        height: 100px;
        background-color: blue;
    }
</style>
</head>
<body>
    <div class="float">Floating Element</div>
    <div class="absolute">Absolute Positioning</div>
</body>
</html>

固定定位

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
 
<div style="height: 200px;width: 300px; background-color: red;"></div>
<div style="height: 200px;width: 300px; background-color: green;position:fixed;bottom:20px;right: 30px;"></div>
<div style="height: 200px;width: 300px; background-color: blue;"></div>
 
</body>
</html>

posted @ 2024-03-19 20:11 Xiao0101 阅读(66) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· 前端基础之CSS基本属性

· 前端基础之CSS基础

· CSS浮动&定位&布局

· CSS结尾

· CSS|传统布局

公告

一个不像技术博客的博客

-------------------------------

时钟canvas

昵称： Xiao0101
园龄： 1年3个月
粉丝： 6
关注： 9

+加关注

2025年3月

日

一

二

三

四

五

六

随笔分类

随笔档案

阅读排行榜

评论排行榜

1. 爬虫之requests模块请求方式(1)

xiao

前端基础之CSS浮动和定位方式

一、浮动

（1）概述

（2）浮动示例

（3）浮动造成的影响

（4）解决浮动带来的影响

方式一：自己加一个div设置高度

方式二：利用clear属性

方式三：通用的解决浮动带来的影响方法(推荐使用)

二、定位方式

（1）定位方式介绍

（2）静态定位

（3）相对定位

（4）绝对定位

（5）固定定位

三、验证浮动和定位是否脱离文档流

（1）不脱离文档流

（2）脱离文档流

公告

搜索

常用链接

合集

随笔分类

随笔档案

阅读排行榜

评论排行榜

推荐排行榜

最新评论

目录

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Title</title>
	<style>
	#d1 {
	height: 200px;
	width: 200px;
	background-color: red;
	float: left; /浮动浮到空中往左边飘/
	}
	#d2 {
	height: 200px;
	width: 200px;
	background-color: yellow;
	float: right; /浮动浮到空中往右边飘/
	}
	</style>

	</head>
	<body>
	<div id="d1"></div>
	<div id="d2"></div>
	</body>
	</html>

	#d4 {
	clear: left; /该标签的左边(地面和空中)不能有浮动的元素，有的话会一直往下，直到没有/
	}

	之后只要标签出现了塌陷的问题就给该塌陷的标签加一个clearfix属性即可
	<div id="d1" class="clearfix">
	<div id="d2"></div>
	<div id="d3"></div>
	<div id="d4"></div>
	</div>

	.relative-box {
	position: relative;
	/* 相对定位 */
	/* 标签由static变为relative，它的性质就从原来没有定位的标签变成了已经定位过的标签 */
	/* 虽然你没有修改值，但是它的性质也已经改变了*/
	top: 20px;
	left: 30px;
	}

	<!DOCTYPE html>
	<html lang="zh-CN">
	<head>
	<meta charset="UTF-8">
	<title>test title</title>
	<style>
	.fix-box {
	width: 100px;
	height: 100px;
	background-color: yellow;
	position: fixed; /写了fixed之后，定位就是根据浏览器窗口/

	/盒子固定在另一个盒子的右侧/
	top: 100px;
	left: 50%;
	margin-left: 400px;
	}

	.median {
	width: 800px;
	height: 1000px;
	background-color: red;
	margin: 0 auto;
	}
	</style>
	</head>
	<body>
	<div class="fix-box"></div>
	<div class="median"></div>
	</body>
	</html>