HTML+CSS学习06-浮动和定位_网页制作案例第六章动手实践-优快云博客

本文链接：https://blog.youkuaiyun.com/Meowmow/article/details/124352847

本文详细介绍了CSS布局中的浮动和定位概念。包括标准流、浮动布局规则、清除浮动的四种方法，以及定位模式、边偏移、子绝父相、定位叠放次序等。还探讨了浮动和定位在页面布局中的应用及其相互影响。

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

CSS传统布局方式

标准流、浮动、定位

标准流（普通流/文档流）

标签按默认方式排列
块级元素占一行，上下排列
行内元素按顺序从左到右排列，碰到父元素右边缘自动换行

浮动

让多个块级元素在一行排列显示

float:left;//向左浮动
float:right;//向右浮动

设置了浮动的块元素脱离了标准流，不再占有原来的位置：

<style>
	.a{
		float:left;
		width:50px;
		height:50px;
		background-color:red;
	}
	.b{
		height:100px;
		width:100px;
		background-color:blue;
	}
</style>
<body>
	<div class="a"></div>
	<div class="b"></div>
</body>
//a,b的上边缘都紧贴页面顶部

添加浮动的元素具有行内块元素特性：

<style>
	div{
		width:100px;
		height:100px;
		float:left;
	}
	.a{
		background-color:red；
	}
	.b{
		background-color:blue；
	}
	.c{
		background-color:yellow；
	}
	.d{
		background-color:green；
	}
</style>
<body>
	<div class="a"></div>
	<div class="b"></div>
	<div class="c"></div>
	<div class="d"></div>
</body>
//a,b,c,d排列在同一行

标准流如果块级盒子没有设置宽度，默认宽度与父元素一样宽，设置浮动后，大小由内容决定
浮动的盒子之间无缝隙

浮动页面布局规则

用标准流盒子排列上下位置，内部使用浮动排列左右位置
一个盒子内有很多盒子，有一个盒子浮动了，其他的盒子也应该浮动
浮动的盒子只会影响后面的标准流，不影响前面的标准流

清除浮动

装浮动盒子的标准流父盒子如果没有设置高度，高度为0，内部的浮动盒子会盖住后面的部分元素
清除浮动：清除浮动造成的影响，父盒子有高度不用清除浮动，无高度需要清除
策略：闭合浮动，只让浮动在父盒子内部影响，不影响父盒子外部的盒子
清除浮动后父盒子会根据内部的浮动盒子高度变化

clear:left;//清除左浮动
clear:right;//清除右浮动
clear:both;//清除左右浮动，一般使用这个

清除浮动方法（四个）

额外标签法：添加一个块元素设置clear:both属性放在最后一个浮动元素后面
结构化较差，添加了无意义标签

<style>
	.a{
		float:left;
		}
	.b{
		float:left;
		}
	.c{
		float:left;
		}
	.clear{
		clear:both;
		}
</style>
<div class="box">
	<div class="a">A</div>
	<div class="b">B</div>
	<div class="c">C</div>
	<div class="clear"></div>
</div>
<div class="d">D</div>

给父盒子添加overflow属性： 可以设为hidden 、auto 、scroll
无法显示溢出的部分
给父元素添加以下代码–:after伪元素法
不照顾低版本浏览器

.clearfix:after{
	content: "";
	display: block;
	height:0;
	clear:both;
	visibility:hidden;
}
.clearfix{
	*zoom: 1;  //IE6 IE7专有
}

<div class="clearfix father">...浮动子元素...</div>

给父元素添加以下代码–双伪元素清除浮动
不照顾低版本浏览器

.clearfix:before,.clearfix:after{
	content: "";
	display: table;
}
.clearfix:after{
	clear: both;
}
.clearfix{
	*zoom: 1;  //IE6 IE7专有
}

<div class="clearfix father">...浮动子元素...</div>

定位

让一个盒子在某个盒子内部移动位置
或固定在屏幕某个位置，并压住其他的盒子
定位=定位模式+边偏移

定位模式position

position:static;//静态定位，默认，无定位，按标准流布局，没有边偏移
position:relative;//相对定位，相对原位置移动，不脱标，保留原位置
position:absolute;//绝对定位，相对最近一级的有定位模式的父元素（不包括static）移动，脱标，不保留原位置
position:fixed;//固定定位，以浏览器可视窗口为参照点移动，不随滚动条移动，脱标，不保留原位置
position:sticky;//粘性定位，以浏览器可视窗口为参照点移动，不脱标，占原来位置，
               //必须搭配top/left/right/bottom使用，跟页面滚动使用，IE不支持，
               //元素处于页面的某个位置，当元素滚到设置的top/left/right/bottom位置的时候固定在页面

边偏移top/bottom/left/right

距离父盒子上下左右边缘的距离

top:50px;
bottom:50px;
left:50px;
right:50px;

子绝父相

子元素使用绝对定位absolute，父元素要用相对定位relative
这样子元素不会影响其他兄弟盒子，可以放在父盒子任一个地方

使用固定定位fixed将元素水平居中于页面

left:50%;
margin-left:-元素宽度的一半

使用绝对定位absolute将子元素水平居中于父元素

加了绝对定位i的盒子不能使用margin:0 auto 水平居中

left:50%;
margin-left:-子元素宽度的一半

<style>
	.father{
		position: relative;
		width: 520px;
		height: 280px;
	}
	.son{
		position: absolute;
		left: 50%;  //盒子左侧移到父盒子水平中心位置
		margin-left: -35px;   //盒子左移自身宽度一半
		width: 70px;
		height: 20px;
	}
<style>
<div class="father">
	<div class="son"></div>
</div>

定位叠放次序z-index

z-index:2;//重叠盒子时，值越大的盒子越靠前，只有定位的盒子才能设置

拓展

绝对定位和固定定位与浮动类似，行内元素添加这两个定位可以设置高度宽度，块级元素添加这两个元素不设置盒子大小默认为内容大小

浮动元素、绝对定位、固定定位不会触发外边距合并问题

浮动元素不会压住下面的标准流内容（文字、图片），绝对定位、固定定位会，绝对定位和固定定位是完全压住了下面的盒子

浮动最初设计就是用来做环绕文字效果的，文字会环绕浮动元素