浮动
如:
div是块状元素,一个div都是独占一行,此时很多div元素在一排排列,就可以用到浮动,让竖着的盒子横着排列。
浮动属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>浮动</title>
<style>
/*
float 浮动
属性值:left 元素左浮动
right 元素右浮动
none 元素不浮动
浮动之后不占位置
*/
div{
width: 200px;
height: 200px;
}
.red{
background-color: red;
float: left;
}
.blue{
background-color: blue;
float: left;
/* width: 300px;
height: 300px; */
}
.green{
background-color: green;
float: left;
}
</style>
</head>
<body>
<div class="red"></div>
<div class="blue"></div>
<div class="green"></div>
</body>
</html>
多个元素浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>多个元素浮动</title>
<style>
/*
float 浮动
很多个元素,一行排不下,换行往后排
*/
div{
width: 200px;
height: 200px;
}
.red{
background-color: red;
float: left;
}
.blue{
background-color: blue;
float: left;
}
.green{
background-color: green;
float: left;
}
</style>
</head>
<body>
<div class="red"></div>
<div class="blue"></div>
<div class="green"></div>
<div class="red"></div>
<div class="blue"></div>
<div class="green"></div>
<div class="red"></div>
<div class="blue"></div>
<div class="green"></div>
<div class="blue"></div>
<div class="red"></div>
<div class="blue"></div>
</body>
</html>
右浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>右浮动</title>
<style>
/*
float 浮动
浮动后面会用于布局,比如一个元素在左边,一个元素在右边,就可以用浮动
左浮动:谁先浮动谁在左边
右浮动:谁先浮动谁在右边
右浮动很多个元素,一行排不下,也是换行靠右往后排
*/
div{
width: 200px;
height: 200px;
}
.red{
background-color: red;
float: right;
}
.blue{
background-color: blue;
/* float: right; */
}
.green{
background-color: green;
/* float: right; */
}
</style>
</head>
<body>
<div class="red"></div>
<div class="blue"></div>
<div class="green"></div>
</body>
</html>
特殊元素浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>特殊浮动</title>
<style>
/*
float 浮动
不同大小的元素,一行不够不是另起一行,而是智能排序
能节约就节约,见缝插针的原则
*/
.red{
width: 1000px;
height: 1000px;
background-color: red;
float: left;
}
.blue{
width: 800px;
height: 800px;
background-color: blue;
float: left;
}
.green{
width: 200px;
height: 200px;
background-color: green;
float: left;
}
</style>
</head>
<body>
<div class="red"></div>
<div class="blue"></div>
<div class="green"></div>
</body>
</html>
文字
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文字</title>
<style>
/*
float 浮动
浮动文字部分不会被挡住,文字会被挤出来
可以利用这个让文字围绕一个元素的背景周边环绕
*/
div{
width: 200px;
height: 200px;
}
.red{
background-color: red;
float: left;
}
.blue{
background-color: blue;
color: #fff;
width: 300px;
height: 300px;
}
.green{
background-color: green;
}
</style>
</head>
<body>
<div class="red"></div>
<div class="blue">你好</div>
<div class="green"></div>
</body>
</html>
清除浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>清除浮动</title>
<style>
/*
高度塌陷
上面外边的盒子高度变成了0, 加了浮动之后,不占据文档位置,下面的盒子就会上来。
解决:
1. 固定高度写死
2. 清除浮动-加兄弟盒子身上,谁需要加谁身上
clear: none 允许浮动
/right 清除右浮动
/left 清除左浮动
/both 清除所有浮动
3. 给当前浮动元素后面补一个盒子,不设置宽高,加一个clear:both;属性
4. overflow: hidden;
会形成BFC,块格式化上下文,给当前元素的父盒子上加这个属性,
会自动计算内容需要占的高度,且不会影响其他元素
*/
/* 方法一:固定写死高度 */
/* .container{
height: 200px;
} */
/* 方法四:加overflow: hidden; */
.container{
overflow: hidden;
}
.box1,.box2{
width: 200px;
height: 200px;
float: left;
}
.box1{
background-color: yellow;
}
.box2{
background-color: blue;
}
.box3{
width: 300px;
height: 300px;
background-color: green;
/* 方法二:清除浮动-谁需要改变样式加谁身上 */
/* clear: left; */
}
</style>
</head>
<body>
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
<!-- 方法三:给当前盒子后面补一个没有宽高的盒子,clear: left/both -->
<!-- <div style="clear: both;"></div> -->
</div>
<div class="box3"></div>
</body>
</html>