浮动
描述
- 是对页面布局的一种表现方式
- 设置浮动的元素会脱离文档流
- 设置浮动的元素会改变后面元素的显示位置
float属性
-
表示设置元素浮动
- left属性值 - 表示设置元素左浮动
- right属性值 - 表示设置元素右浮动
- 设置浮动的元素会脱离文档流，指定元素后面的元素会自动向前，形成重叠的显示效果
<head>
<meta charset="UTF-8">
<title>浮动</title>
<style>
/*
float属性 - 表示设置元素浮动
* left属性值 - 表示设置元素左浮动
* right属性值 - 表示设置元素右浮动
* 设置浮动的元素会脱离文档流，指定元素后面的元素会自动向前，形成重叠的显示效果
*/
div {
width: 200px;
height: 200px;
}
#d1 {
background-color: red;
float: left;
}
#d2 {
background-color: green;
width: 300px;
height: 300px;
}
#d3 {
background-color: blue;
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
</body>
元素类型的浮动
块级元素浮动
- 垂直方向排列改为水平方向排列
- 显示宽度由父级宽度的 100% 变为 0（在没设宽的情况下）
<head>
<meta charset="UTF-8">
<title>元素类型的浮动</title>
<style>
/*
块级元素浮动
* 垂直方向排列改为水平方向排列
* 显示宽度由父级宽度的 100% 变为 0（在没设宽的情况下）
*/
div {
width: 200px;
height: 200px;
/* 设置浮动 */
float: left;
/* 块级元素 */
display: block;
}
#d1 {
background-color: red;
}
#d2 {
background-color: green;
}
#d3 {
background-color: blue;
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
</body>
内联元素浮动
- 允许设置宽度和高度
<head>
<meta charset="UTF-8">
<title>元素类型的浮动</title>
<style>
/*
内联元素浮动
* 允许设置宽度和高度
*/
div {
width: 200px;
height: 200px;
/* 设置浮动 */
float: left;
/* 内联元素 */
display: inline;
}
#d1 {
background-color: red;
}
#d2 {
background-color: green;
}
#d3 {
background-color: blue;
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
</body>
行内块级元素浮动
- 去掉了元素之间的间隙
<head>
<meta charset="UTF-8">
<title>元素类型的浮动</title>
<style>
/*
行内块级元素浮动
* 去掉了元素之间的间隙
*/
div {
width: 200px;
height: 200px;
/* 设置浮动 */
float: left;
/* 行内块级元素 */
display: inline-block;
}
#d1 {
background-color: red;
}
#d2 {
background-color: green;
}
#d3 {
background-color: blue;
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
</body>
父子关系的浮动
- 子级元素的浮动范围，不能超出父级元素的所在区域范围
- 父级元素浮动，子级元素也会跟随父级一同浮动
<head>
<meta charset="UTF-8">
<title>父子关系的浮动</title>
<style>
/*
父子关系的浮动
* 子级元素的浮动范围，不能超出父级元素的所在区域范围
* 父级元素浮动，子级元素也会跟随父级一同浮动
*/
#d1 {
width: 300px;
height: 300px;
background-color: red;
float: right;
}
#d2 {
width: 100px;
height: 100px;
background-color: green;
float: right;
}
</style>
</head>
<body>
<div id="d1">
<div id="d2"></div>
</div>
</body>
兄弟关系的浮动
- 如果下一个兄弟元素浮动，下一个兄弟元素不会超过上一个兄弟元素所占的区域位置
<head>
<meta charset="UTF-8">
<title>兄弟关系的浮动</title>
<style>
/*
兄弟关系的浮动
* 如果下一个兄弟元素浮动，下一个兄弟元素不会超过上一个兄弟元素所占的区域位置
*/
div {
width: 200px;
height: 200px;
}
#d1 {
background-color: red;
}
#d2 {
background-color: green;
float: right;
}
</style>
</head>
<body>
<div id="d1"></div>
<div id="d2"></div>
</body>
高度塌陷
- 父级元素没设高度，子级元素设置浮动 - 父级元素会高度塌陷
- 高度塌陷 - 仅存在父子关系中
解决方法
- 为父级元素设置高度
-
开启BFC环境
- 浮动可以开启 - 脱离文档流
- 将元素类型改为行内块级元素可以开启 - 行内块级元素的本身问题
- overflow属性 属性值为hidden时可以开启 - 解决内容溢出
- 设置绝对定位可以开启 - 脱离文档流
- 注意：开启BFC方法所带来的副作用
<head>
<meta charset="UTF-8">
<title>高度塌陷</title>
<style>
/*
高度塌陷 - 仅存在父子关系中
* 父级元素没设高度，子级元素设置浮动 - 父级元素会高度塌陷
解决方法：
* 为父级元素设置高度
* 开启BFC环境
* 浮动可以开启 - 脱离文档流
* 将元素类型改为行内块级元素可以开启 - 行内块级元素的本身问题
* overflow属性 属性值为hidden时可以开启 - 解决内容溢出
* 设置绝对定位可以开启 - 脱离文档流
* 注意：开启BFC方法所带来的副作用
*/
#d1 {
border: 10px solid black;
/* 父级元素没有设置高度 */
/* 为父级元素设置高度 */
height: 200px;
/* 开启BFC环境 - 解决高度塌陷 */
/* 设置浮动 */
float: left;
/* 改变元素的类型为行内块级元素 */
display: inline-block;
/* 设置overflow属性 */
overflow: hidden;
}
#d2 {
width: 300px;
height: 200px;
background-color: #2196f3;
/* 子级元素设置为浮动 */
float: left;
}
</style>
</head>
<body>
<div id="d1">
<div id="d2"></div>
</div>
</body>
