关键词
- float
- overflow
- clear
浮动
写法：float:left|right
特点:
给一个元素设置了浮动后，该元素不占位置（脱离标准流）
给一个元素设置了浮动，会影响该元素后面的元素
浮动可以让块级元素在一行上显示
浮动可是实现模式转换（span 设置浮动可以设置宽高）
浮动作用:
浮动最初的作用： 解决文字图片环绕效果。（文字不会浮动的影响）
制作网页导航（浮动+列表实现导航）
进行网页布局 （div+CSS(盒子模型+浮动+定位)）
注意：
◆让块级元素在一行上显示就使用浮动
◆如果一个元素要实现模式转换，就使用display
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.father{
width:400px;
height:900px;
border:1px solid red;
}
.c1{
width: 200px;
height: 100px;
background-color: chartreuse;
}
.c2{
width: 100px;
height: 150px;
background-color: green;
}
.c3{
width: 260px;
height: 400px;
background-color: gray;
}
</style>
</head>
<body>
<div class="father">
<div class="c1">
</div>
<div class="c2">
</div>
<div class="c3">
</div>
</div>
</body>
</html>
让第一个浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.father{
width:400px;
height:900px;
border:1px solid red;
}
.c1{
width: 200px;
height: 100px;
background-color: chartreuse;
float: left;
}
.c2{
width: 100px;
height: 150px;
background-color: green;
}
.c3{
width: 260px;
height: 400px;
background-color: gray;
}
</style>
</head>
<body>
<div class="father">
<div class="c1">
</div>
<div class="c2">
</div>
<div class="c3">
</div>
</div>
</body>
</html>
第二个也浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.father{
width:400px;
height:900px;
border:1px solid red;
}
.c1{
width: 200px;
height: 100px;
background-color: chartreuse;
float: left;
}
.c2{
width: 100px;
height: 150px;
background-color: green;
float:left;
}
.c3{
width: 260px;
height: 400px;
background-color: gray;
}
</style>
</head>
<body>
<div class="father">
<div class="c1">
</div>
<div class="c2">
</div>
<div class="c3">
</div>
</div>
</body>
</html>
第三个也浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.father{
width:400px;
height:900px;
border:1px solid red;
}
.c1{
width: 200px;
height: 100px;
background-color: chartreuse;
float: left;
}
.c2{
width: 100px;
height: 150px;
background-color: green;
float:left;
}
.c3{
width: 260px;
height: 400px;
background-color: gray;
float: left;
}
</style>
</head>
<body>
<div class="father">
<div class="c1">
</div>
<div class="c2">
</div>
<div class="c3">
</div>
</div>
</body>
</html>
第二个右浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.father{
width:400px;
height:900px;
border:1px solid red;
}
.c1{
width: 200px;
height: 100px;
background-color: chartreuse;
float: left;
}
.c2{
width: 100px;
height: 150px;
background-color: green;
float:right;
}
.c3{
width: 260px;
height: 400px;
background-color: gray;
float: left;
}
</style>
</head>
<body>
<div class="father">
<div class="c1">
</div>
<div class="c2">
</div>
<div class="c3">
</div>
</div>
</body>
</html>
浮动常用的三个属性：float:left|right|none 默认none
塌陷：
外层div没设置高度，如果不是全浮动，那么会由内容自动撑开father的高度，但如果里层div全浮动，会导致father塌陷了。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.father{
width:600px;
border:1px solid red;
}
.c1{
width: 200px;
height: 100px;
background-color: chartreuse;
float: left;
}
.c2{
width: 100px;
height: 150px;
background-color: green;
float:right;
}
.c3{
width: 260px;
height: 400px;
background-color: gray;
float:left;
}
</style>
</head>
<body>
<div class="father">
<div class="c1">
</div>
<div class="c2">
</div>
<div class="c3">
</div>
</div>
</body>
</html>
塌陷是病，怎么治呢？
有两种治法。
第一种治法，除了上面的div,再做一个空的div，在该div的样式设置时，设置清除浮动
第二种治法，在father的css里，设置overflow:hidden 会触发重新计算div的高度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.father {
width: 400px;
border: 1px solid red;
/* 清除浮动 触发浏览器重新计算高度*/
overflow:hidden;
}
.c1 {
width: 200px;
height: 100px;
background-color: chartreuse;
float:left;
}
.c2 {
width: 100px;
height: 150px;
background-color: green;
float:right;
}
.c3 {
width: 260px;
height: 400px;
background-color: gray;
float:right;
}
/* #clear{
clear:both ;
} */
</style>
</head>
<body>
<div class="father">
<div class="c1">
</div>
<div class="c2">
</div>
<div class="c3">
</div>
<div id="clear"> </div>
</div>
</body>
</html>
