测开：前端基础-css页面布局-浮动

最新推荐文章于 2024-09-28 19:02:04 发布

做测试的喵酱

最新推荐文章于 2024-09-28 19:02:04 发布

阅读量89

点赞数

分类专栏：前端-css 文章标签：前端 css css3

原文链接：https://blog.csdn.net/Czc1357618897/article/details/122980847

版权

前端-css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

文章介绍了网页布局的三种传统方式：标准流，浮动和定位。标准流是元素按照默认方式排列，块级元素独占一行，行内元素从左到右排列。浮动常用于让多个块级元素一行显示，它可以改变元素的排列方式。文章还探讨了浮动的特性，如元素脱离标准流，一行内显示并顶部对齐，以及具有行内块元素特性。

摘要由CSDN通过智能技术生成

一：传统网页布局的三种方式

网页布局的本质–用CSS来摆放盒子，把盒子摆放到相应的位置，css提供了三种传统布局方式，分别是标准流，浮动和定位三种。

二：标准流

所谓标准流就是标签按照规定好默认方式排列

1.块级元素会独占一行，从上向下排列
常用元素：div, hr, p, h1-h6, ul, ol, dl, form, table
2.行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘自动换行
常用元素：span, a, i, em等

标准流是最基本的布局方式。

如下图，依次从上到下排列的。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box,.box1,.box2,.box3{
				background-color: aquamarine;
				width: 100px;
				height: 100px;
			}
			.box1{
				background-color: aqua;
			}
			.box2{
				background-color: olive;
			}
		</style>
	</head>
	<body>
		<div class="box">
			box
		</div>
		<div class="box1">
			box1
		</div>
		<div class="box2">
			box2
		</div>
		<div class="box3">
			box3
		</div>
	</body>
</html>

三：为什么需要浮动

有很多布局效果，标准流没有办法完成，此时就可以利用浮动完成布局。因为浮动可以改变元素标签默认的排列方式。

浮动最典型的应用：可以让多个块级元素一行内排列显示

通过浮动float，实现多个元素横向布局。

			.box,.box1,.box2,.box3{
				background-color: aquamarine;
				width: 100px;
				height: 100px;
				float: left;
			}

四、实现浮动

float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。
语法：

选择器 {
	float: 属性值;
}

属性值	作用
none	元素不浮动（默认）
left	元素向左浮动
right	元素向右浮动

五、浮动的特性

背景：

如下图，在页面内，有四个大小、颜色不一致的box

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			.box{
				background-color: aquamarine;
				width: 100px;
				height: 100px;
			}
			.box1{
				background-color: aqua;
				width: 120px;
				height: 120px;
			}
			.box2{
				background-color: olive;
				width: 150px;
				height: 150px;
			}
			.box3{
				background-color: olive;
				background-color: chocolate;
				width: 180px;
				height: 180px;
			}
		</style>
	</head>
	<body>
		<div class="box">
			box
		</div>
		<div class="box1">
			box1
		</div>
		<div class="box2">
			box2
		</div>
		<div class="box3">
			box3
		</div>
	</body>
</html>

5.1 特性1: 浮动元素会脱离标准流（脱标）

特性：

设置了浮动的元素，脱离标准流的控制移动到指定位置。浮动的盒子不再保留原先的位置。

=====================

我将box1设置为左浮动。

			.box1{
				background-color: aqua;
				width: 120px;
				height: 120px;
				float: left;
			}

效果：

box1 飘在了box2上

=====================

我将box1设置为右浮动

			.box1{
				background-color: aqua;
				width: 120px;
				height: 120px;
				float: right;
			}

效果：

box2 顶替了box1的位置，

box1飘在了页面的右侧。

我的理解：

1、页面上一共有两个图层。第一层就是按部就班展示的标准流层。

当某个元素设置为浮动时，他就飘起来了，脱离了原来的标准流层。展示在了标准流上面的那一层（有可能会覆盖下面的标准流层）。与此同时，原来的位置也会被下面的元素顶上。

5.2 特性：浮动元素会一行内显示并且元素顶部对齐

特性：

浮动元素会一行内显示并且元素顶部对齐。

操作：

我把box1,box2,box3 都设置为左浮动

效果：

浮动的元素是互相贴靠在一起的（不会有缝隙），如果父级宽度装不下这些浮动的盒子，多的盒子就会另起一行

5.3 特性：浮动元素会具有行内块元素特性

任何元素都可以浮动，不管原先是什么模式的元素，添加浮动之后具有行内块元素相似的特性。

1.如果块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动之后，它的大小根据内容来决定
2.浮动的盒子中间是没有缝隙的，是紧挨着一起的
3.行内元素同理

六：浮动元素和标准流父级搭配

为了约束浮动元素位置，网页布局一般采取的策略是：
先用标准流父元素排列上下位置，之后内部子元素采取浮动排列左右位置。

在这里插入图片描述