【CSS】浮动 ① ( 浮动引入 | 盒子模型位置摆放三大机制 - 普通流、浮动、定位 | 行内块元素的摆放缺陷 )

最新推荐文章于 2025-12-18 17:13:23 发布

原创最新推荐文章于 2025-12-18 17:13:23 发布 · 632 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#css #前端 #浮动 #普通流 #定位

CSS 专栏收录该内容

142 篇文章

订阅专栏

文章目录

一、盒子模型位置摆放三大机制 - 普通流、浮动、定位
二、行内块元素的摆放缺陷

一、盒子模型位置摆放三大机制 - 普通流、浮动、定位

盒子模型位置摆放三大机制 :

普通流 : 默认的摆放样式 ;
- 块级元素摆放 : 每个块级元素独占一行 , 排列顺序从上到下 ; 如 : div , p , h1 等 ;
- 行内元素摆放 : 多个行内元素在同一行显示 , 排列顺序从左到右 , 显示到边缘自动换行 ; 如 : span , strong , a 等 ;
浮动 : 盒子模型在普通流基础上覆盖显示 , 多个块级元素可以在同一行相互覆盖显示 ;
定位 : 盒子模型在浏览器指定位置显示 ;

普通流相当于 Android 中的线性布局 ;
浮动相当于 Android 中的帧布局或相对布局或约束布局 ;
定位相当于 Android 中的绝对布局 ;

二、行内块元素的摆放缺陷

行内块元素的摆放缺陷 :

缝隙无法控制 : 行内块元素之间有缝隙 , 该缝隙大小无法控制 ;
排列顺序无法控制 : 行内块元素只能从左到右进行排列 , 不能左右对齐或右对齐排列 ;

下面的示例中 , 行内块元素之间始终有一条无法控制的缝隙 ;

行内元素代码示例 :

<!DOCTYPE html> 
<html lang="en">
<head>    
	<meta charset="UTF-8" /> 
    <title>浮动引入</title>
	<style type="text/css">
		/* 清除标签默认的内外边距 */
		* {
		   padding: 0;     
		   margin: 0;
		}
		
		div {
			display: inline-block;
			width: 200px;
			height: 200px;
			background-color: pink;
		}
	</style>
</head>
<body>
	<div></div>
	<div></div>
	<div></div>
</body>
</html>