【CSS】浮动 ⑦ ( 浮动元素与兄弟容器盒子关系 | 代码示例 )

韩曙亮

发布于 2023-03-27 10:12:21

75600

代码可运行

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

运行总次数：0

代码可运行

一、浮动元素与父容器盒子关系

浮动元素与父容器盒子关系 : 浮动只会影响当前盒子和后面的盒子 , 前面的标准流元素不受本元素浮动的影响 ;

前一个兄弟元素是浮动元素 :
- 当前浮动元素与前一个浮动兄弟元素顶部对齐 , 放置在右侧 ;
- 当前普通流元素只会在前一个普通流元素下方 , 如果前面没有普通流元素, 则在父容器顶部 ;
前一个兄弟元素是普通流元素 :
- 当前浮动元素在前一个普通流兄弟元素下方 ;
- 当前普通流元素在前一个普通流元素下方 ;

如果想要多个元素在一行中显示 , 那么所有的子元素都要浮动 ,

如果出现一个普通元素 , 那么普通元素后面的浮动元素都会自动显示在第二行 ;

二、代码示例

1、浮动元素 + 浮动元素

两个浮动元素在一行显示 ;

代码示例 :

<!DOCTYPE html> 
<html lang="en">
<head>    
	<meta charset="UTF-8" /> 
    <title>浮动元素与父盒子</title>
	<style type="text/css">
		/* 清除标签默认的内外边距 */
		* {
		   padding: 0;     
		   margin: 0;
		}
		
		/* 父容器盒子模型 */
		.father {
			width: 500px;
			height: 500px;
			background-color: pink;
			
			/* 20 像素边框 */
			border: 20px solid blue;
		}
		
		/* 子元素 - 浮动元素 */
		.son1 {
			float: left;
			width: 200px;
			height: 150px;
			background-color: red;
		}
		
		/* 子元素 - 浮动元素 */
		.son2 {
			float: left;
			width: 150px;
			height: 200px;
			background-color: purple;
		}
	</style>
</head>
<body>
	<div class="father">
		<div class="son1"></div>
		<div class="son2"></div>
	</div>
</body>
</html>

展示效果 :

2、普通元素 + 浮动元素

本示例中 , 浮动元素在普通元素下方 , 因为浮动属性不影响之前的普通流元素 ,

从本元素开始浮动 , 也要在普通流元素下方进行排列 ;

代码示例 :

<!DOCTYPE html> 
<html lang="en">
<head>    
	<meta charset="UTF-8" /> 
    <title>浮动元素与父盒子</title>
	<style type="text/css">
		/* 清除标签默认的内外边距 */
		* {
		   padding: 0;     
		   margin: 0;
		}
		
		/* 父容器盒子模型 */
		.father {
			width: 400px;
			height: 400px;
			background-color: pink;
			
			/* 20 像素边框 */
			border: 20px solid blue;
		}
		
		/* 子元素 - 普通元素 */
		.son1 {
			width: 200px;
			height: 150px;
			background-color: red;
		}
		
		/* 子元素 - 浮动元素 */
		.son2 {
			float: left;
			width: 150px;
			height: 200px;
			background-color: purple;
		}
	</style>
</head>
<body>
	<div class="father">
		<div class="son1"></div>
		<div class="son2"></div>
	</div>
</body>
</html>

展示效果 :

3、浮动元素 + 普通元素

本示例中 , 浮动元素覆盖在普通元素上方 ;

代码示例 :

<!DOCTYPE html> 
<html lang="en">
<head>    
	<meta charset="UTF-8" /> 
    <title>浮动元素与父盒子</title>
	<style type="text/css">
		/* 清除标签默认的内外边距 */
		* {
		   padding: 0;     
		   margin: 0;
		}
		
		/* 父容器盒子模型 */
		.father {
			width: 400px;
			height: 400px;
			background-color: pink;
			
			/* 20 像素边框 */
			border: 20px solid blue;
		}
		
		/* 子元素 - 浮动元素 */
		.son1 {
			float: left;
			width: 200px;
			height: 150px;
			background-color: red;
		}
		
		/* 子元素 - 普通元素 */
		.son2 {
			width: 150px;
			height: 200px;
			background-color: purple;
		}
	</style>
</head>
<body>
	<div class="father">
		<div class="son1"></div>
		<div class="son2"></div>
	</div>
</body>
</html>

展示效果 :