【CSS】浮动 ③ ( 浮动特性 | 脱离标准流布局 | 取消占用位置 | 显示模式类似于行内块元素 )

韩曙亮

发布于 2023-03-25 11:41:32

5990

发布于 2023-03-25 11:41:32

文章被收录于专栏：韩曙亮的移动开发专栏

文章目录

一、默认的标准流布局

默认的标准流布局排列如下 ,

块级元素各占一行 , 从上到下排列 ;
行内元素多个公占一行 , 从有到右排列 ;

下面代码中 , 两个 <div> 块级元素 , 在上下两行显示 ;

代码示例 :

<!DOCTYPE html> 
<html lang="en">
<head>    
	<meta charset="UTF-8" /> 
    <title>浮动特性</title>
	<style>
		/* 清除标签默认的内外边距 */
		* {
		   padding: 0;     
		   margin: 0;
		}
		
		.div1 {
			width: 200px;
			height: 200px;
			background-color: orange;
		}
		
		.div2 {
			width: 300px;
			height: 300px;
			background-color: pink;
		}
	</style>
</head>
<body>
	<div class="div1"></div>
	<div class="div2"></div>
</body>
</html>

展示效果 : 标准流的块级元素分别占用一行显示 , 排列顺序由上到下 ;

二、浮动特性 - 脱离标准流布局、取消占用位置

将上面的 <div> 块级元素设置为浮动 , 则该元素从标准流布局中脱离, 则标准流布局只剩下另一个 div 元素 ;

float: left;

标准流布局中 , 下面的 <div> 元素显示在顶部 ;

设置为浮动的元素 , 会显示在父容器的左上角 , 这里的父容器就是浏览器 ;

浮动特性 ( 脱离标准流布局 ) : 浮动的元素会脱离标准流布局 , 剩余的标准流布局正常显示 , 脱离的浮动元素在标准流上方显示 ;

浮动特性 ( 取消占用位置 ) : 脱离标准流的浮动元素原来在标准流布局中的位置 , 也被取消 , 被后面的标准流元素占据 ;

网页中的 Display 显示模式有 3 种 ;

块级元素
行内元素
行内块元素

元素的浮动特性会改变该元素的 Display 显示模式 , 原来的元素不管是块级元素还是行内元素 , 设置浮动样式后 , 其显示模式类似于行内块元素 ;

代码示例 :

<!DOCTYPE html> 
<html lang="en">
<head>    
	<meta charset="UTF-8" /> 
    <title>浮动特性</title>
	<style>
		/* 清除标签默认的内外边距 */
		* {
		   padding: 0;     
		   margin: 0;
		}
		
		.div1 {
			float: left;
			width: 200px;
			height: 200px;
			background-color: orange;
		}
		
		.div2 {
			width: 300px;
			height: 300px;
			background-color: pink;
		}
	</style>
</head>
<body>
	<div class="div1"></div>
	<div class="div2"></div>
</body>
</html>

显示效果 :

三、浮动特性 - 显示模式类似于行内块元素

网页中的 Display 显示模式有 3 种 ;

块级元素
行内元素
行内块元素

浮动特性 ( 显示模式类似于行内块元素 ) : 元素的浮动特性会改变该元素的 Display 显示模式 , 原来的元素不管是块级元素还是行内元素 , 设置浮动样式后 , 其显示模式类似于行内块元素 ;

如果同时将两个 div 元素设置为浮动元素 , 则这两个浮动元素会在一行显示 , 并且元素之间没有间隔 ;

如果一行内显示多个浮动元素 , 缩小浏览器 , 父容器也随之缩小 , 如果父容器装不下浮动元素 , 会另起一行显示 ;

代码示例 :

<!DOCTYPE html> 
<html lang="en">
<head>    
	<meta charset="UTF-8" /> 
    <title>浮动特性</title>
	<style>
		/* 清除标签默认的内外边距 */
		* {
		   padding: 0;     
		   margin: 0;
		}
		
		.div1 {
			float: left;
			width: 200px;
			height: 200px;
			background-color: orange;
		}
		
		.div2 {
			float: left;
			width: 300px;
			height: 300px;
			background-color: pink;
		}
	</style>
</head>
<body>
	<div class="div1"></div>
	<div class="div2"></div>
</body>
</html>

显示效果 :

四、父容器中分别设置左右浮动效果

父容器中分别设置左右浮动效果 , 只需要设置一个 <div> 元素左浮动 , 一个 <div> 元素右浮动 ;

代码示例 :

<!DOCTYPE html> 
<html lang="en">
<head>    
	<meta charset="UTF-8" /> 
    <title>浮动特性</title>
	<style>
		/* 清除标签默认的内外边距 */
		* {
		   padding: 0;     
		   margin: 0;
		}
		
		.div1 {
			float: left;
			width: 200px;
			height: 200px;
			background-color: orange;
		}
		
		.div2 {
			float: right;
			width: 300px;
			height: 300px;
			background-color: pink;
		}
	</style>
</head>
<body>
	<div class="div1"></div>
	<div class="div2"></div>
</body>
</html>

显示效果 :