![](https://i-blog.csdnimg.cn/blog_migrate/245e07313f5b3ac6c1814db6449d4f43.png)
浮动属性
![](https://i-blog.csdnimg.cn/blog_migrate/5043e07e54c5ae910c52efbdeb5b4230.png)
<!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>Document</title>
<style>
div{
width: 100px;
height: 100px;
}
.red{
background-color: red;
float: left;
}
.green{
width: 500px;
background-color: green;
/* float: left; */
}
.blue{
background-color: blue;
/* float: left; */
}
</style>
</head>
<body>
<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>
</body>
</html>
如果三个方框都设置浮动属性,则就并排显示
![](https://i-blog.csdnimg.cn/blog_migrate/20f9013962fc320922c295faf84f198c.png)
设置多个div浮动时,一行排不满就换另一行
![](https://i-blog.csdnimg.cn/blog_migrate/d8d634a88307a860f0536fb166472836.png)
右浮动
![](https://i-blog.csdnimg.cn/blog_migrate/517bbc89307e30e4d0772e793b3ee17a.png)
见缝插针原则
<!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>Document</title>
<!-- 见缝插针原则 -->
<style>
div{
width: 100px;
height: 100px;
}
.red{
width: 800px;
height: 800px;
background-color: red;
float: left;
}
.green{
width: 600px;
height: 600px;
background-color: green;
float: left;
}
.blue{
width: 300px;
height: 300px;
background-color: blue;
float: left;
}
</style>
</head>
<body>
<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>
</body>
</html>
![](https://i-blog.csdnimg.cn/blog_migrate/2bd7e0b22ee472f93babbe1738f09b6c.png)
文字浮动中文字会被挤出来
<!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>Document</title>
<style>
div{
width: 100px;
height: 100px;
}
.red{
background-color: red;
float: left;
}
.green{
width: 300px;
height: 300px;
background-color: green;
/* float: left; */
}
.blue{
background-color: blue;
/* float: left; */
}
</style>
</head>
<body>
<div class="red"></div>
<div class="green">大家好你好</div>
<div class="blue"></div>
</body>
</html>
总结
![](https://i-blog.csdnimg.cn/blog_migrate/ec1ca26cedf024b43dada054629ff687.png)
清浮动![](https://i-blog.csdnimg.cn/blog_migrate/bdf17d718728154ec32cc8e22337ff04.png)
<!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>Document</title>
<style>
.box1,.box2{
width: 200px;
height: 200px;
float: left;
}
.box1{
background-color: yellow;
}
.box2{
background-color: blue;
}
.box{
width: 300px;
height: 300px;
background-color: red;
clear: left;
}
.container{
overflow: hidden;
}
/*
1.写固定高度
2.清浮动 clear:none/right/left/both
3.当前浮动元素后补一个div,不设置宽高,clear:both
4.overflow;hidden
*/
</style>
</head>
<body>
<div class="container">
<div class="box1"></div>
<div class="box2"></div>
<!-- <div style="clear: both;"></div> -->
</div>
<div class="box"></div>
</body>
</html>
![](https://i-blog.csdnimg.cn/blog_migrate/f6e7baf24646b715f20094658838dcdd.png)