文章目录
- 一、浮动元素与父容器盒子关系
- 二、代码示例
- 1、浮动元素 + 浮动元素
- 2、普通元素 + 浮动元素
- 3、浮动元素 + 普通元素
一、浮动元素与父容器盒子关系
浮动元素 与 父容器盒子关系 : 浮动 只会 影响 当前盒子 和 后面的盒子 , 前面的 标准流元素 不受 本元素浮动 的影响 ;
- 前一个兄弟元素是 浮动元素 :
- 当前 浮动元素 与 前一个浮动兄弟元素 顶部对齐 , 放置在右侧 ;
- 当前 普通流元素 只会在 前一个普通流元素下方 , 如果前面没有普通流元素, 则在父容器顶部 ;
- 前一个兄弟元素是 普通流元素 :
- 当前 浮动元素 在 前一个普通流兄弟元素 下方 ;
- 当前 普通流元素 在 前一个普通流元素下方 ;
如果想要多个元素 在 一行中显示 , 那么所有的 子元素都要 浮动 ,
如果出现一个普通元素 , 那么普通元素后面的 浮动元素都会自动显示在第二行 ;
二、代码示例
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>展示效果 :
