文章目录
- 一、浮动元素与父容器盒子关系
- 二、代码示例
- 1、有内边距的情况
- 2、没有内边距的情况
一、浮动元素与父容器盒子关系
在 父容器 盒子模型 中 , 将 子元素 设置为 浮动元素
- 浮动元素位置 : 浮动元素 会自动 浮动到 父容器盒子模型 的左上角 与 右上角 ,
- 浮动元素 与 父容器盒子模型边框 : 浮动元素 与 父容器 边框不重叠 , 如果没有内边距 , 浮动元素 紧贴边框 内测 ;
- 浮动元素 与 父容器盒子模型 内边距 : 浮动元素 紧贴 父容器内边距 ;
二、代码示例
1、有内边距的情况
在下面的代码中 , 父容器 边框 20 像素 , 内边距 20 像素 ,
浮动元素 会 紧贴 20 像素的内边距 , 距离边框 20 像素 位置 的左上角 放置 ;
代码示例 :
<!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;
/* 20 像素内边距 */
padding: 20px;
/* 20 像素外边距 */
margin: 20px;
}
/* 子元素 - 浮动元素 */
.son {
float: left;
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>显示效果 :
2、没有内边距的情况
如果不设置内边距 和 外边距 , 父容器样式如下设置 :
/* 父容器盒子模型 */
.father {
width: 400px;
height: 400px;
background-color: pink;
/* 20 像素边框 */
border: 20px solid blue;
}完整代码示例 :
<!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;
}
/* 子元素 - 浮动元素 */
.son {
float: left;
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div class="father">
<div class="son"></div>
</div>
</body>
</html>展示效果 : 浮动元素 紧贴 父容器 盒子模型 边框内测 ;
