1.浮动元素会脱离网页文档,与其他元素发生重叠,但是不会与文字或图片重叠
例如:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.green {
width: 100px;height: 100px;
background-color: green;
float: left; /* 左浮动 */
}
.red{
width: 200px;height: 150px;
background-color: red;
}
</style>
</head>
<body>
<p>文字环绕效果</p> <!-- 浮动元素会脱离网页文档,与其他元素发生重叠,但是不会与文字重叠 -->
<div class="green" ></div>
<div class="red">文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕文字环绕</div>
</body>
</html>
2.要使其不发生重叠
设置其左浮动,这些容器会依次从左往右排列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.a{
width: 200px;
background-color: brown;
}
.b{
width: 300px;
background-color:chartreuse;
}
.c{
width: 200px;
background-color:deepskyblue;
}
.a,.b,.c{float: left;height: 150px;}
</style>
</head>
<body>
<p>横向排版</p>
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
</body>
</html
3.避免浮动容器下面的容器被遮挡
使用另一个容器将浮动容器包裹起来
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
.a {
width: 20%;
background: orangered url(images/jojo.jpg)
}
.b {
width: 60%;
background:green;
}
.c {
width: 20%;
background: blue;
}
.a,.b,.c{
float: left;
height: 200px;
}
.h {
height: 360px;
background: yellow;
}
.outer {
height: 200px;
}
</style>
</head>
<body>
<div class="outer"> <!-- 用另一个容器将其包裹住,避免下面的容器会有一部分被遮住 -->
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
</div>
<div class="h"></div>
</body>
</html>
4.使容器的排版不受浮动影响
使用 clear:left/right/both 设置其不受左/右/所有 浮动影响
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="wclassth=device-wclassth, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
ul{
width: 300px;height: 500px;
border-width: 1px;
border-style: solclass;
border-color: black;
}
.a{float:left;}
.b{float:right;}
.c{float:left;}
.d{float:right;}
li { clear: both;}
/* 使其不受左右浮动的影响 */
</style>
</head>
<body>
<ul>
<li class="a" >在?</li>
<li class="b" >在的</li>
<li class="c" >真的吗?</li>
<li class="d" >真的</li>
</ul>
</body>
</html>
5.浮动元素在排列时,只参考前一个元素的位置即可
例如d的位置是参考c的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style type="text/css">
.a{width: 30%;height: 100px;background-color: blue}
.b{width: 30%;height: 200px;background-color: yellow}
.c{width: 30%;height: 300px;background-color: violet}
.d{width: 30%;height: 400px;background-color: black}
.a,.b,.c,.d{float: left;}
</style>
</head>
<body>
<div class="a"></div>
<div class="b"></div>
<div class="c"></div>
<div class="d"></div>
</body>
</html>
6.tips
*浮动元素不会覆盖文字内容
*浮动元素不会覆盖图片内容
*浮动元素不会覆盖表单元素(输入框.按钮.下拉框.复选框等)