0
点赞
收藏
分享

微信扫一扫

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


文章目录

  • 一、默认的标准流布局
  • 二、浮动特性 - 脱离标准流布局、取消占用位置
  • 三、浮动特性 - 显示模式类似于行内块元素
  • 四、父容器中分别设置左右浮动效果






一、默认的标准流布局


默认的 标准流

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

下面代码中 , 两个 <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>

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

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






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


将 上面的 <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>

显示效果 :

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






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


网页中的 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>

显示效果 :

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






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


父容器中分别设置左右浮动效果 , 只需要设置一个 <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>

显示效果 :

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


举报

相关推荐

浮动元素具有行内块元素

0 条评论