浮动布局的特点
1、子级一旦浮动,就不再撑开父级高度
2、浮动的元素会不完全脱离文档流:脱离文档流的意思就是高于原文档流内盒子的显示层次
浮动布局的实例
案例1、需求：用浮动布局实现标签并排排列
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>浮动布局</title>
<style>
.box{
200px;
height: 80px;
background-color: red;
border: 1px solid black;
/*float就是浮动布局，只要是排成一排的都是浮动布局设置的*/
float: left;
}
</style>
</head>
<body>
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</body>
</html>
案例2、需求：增加一个标签，和box的父级是同级的标签
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>浮动布局</title>
<style>
.box{
200px;
height: 80px;
background-color: red;
border: 1px solid black;
float: left;
}
.ele{
200px;
height: 80px;
background-color: red;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="sup">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
<div>
<div class="ele">4</div>
</div>
</body>
</html>
PS：出现了一个问题，就是sup标签下的子标签开启了浮动布局，但是ele标签没有开，ele标签不显示
PS：原因就是sup标签设置了浮动，而ele标签是和sup标签同级的，而ele标签在sup标签下面，所以被sup标签覆盖了，导致无法显示
解决案例2出现bug的问题
思路1：先检查区域，我们先给。sup区域增加一个颜色，查看sup区域是在什么位置
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>浮动布局</title>
<style>
.box{
200px;
height: 80px;
background-color: red;
border: 1px solid black;
/*float就是浮动布局，只要是排成一排的都是浮动布局设置的*/
/*子级一旦浮动,就不再撑开父级高度*/
/*浮动的元素会不完全脱离文档流:脱离文档流的意思就是高于原文档流内盒子的显示层次*/
float: left;
}
/*sup是父级,这里如果将sup设置背景色，没有开启浮动，则会被撑开，能够看到背景色的区域*/
.sup{
background-color: firebrick;
}
.ele{
200px;
height: 80px;
background-color: red;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="sup">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
<div>
<div class="ele">4</div>
</div>
</body>
</html>
思路2：由于思路一可得知sup区域是在ele区域的上面，但是因为子级一旦浮动,就不再撑开父级高度，所以ele因为sup的父级没有高度，则位置到了sup的正下方，导致被覆盖
因为浮动的元素会不完全脱离文档流:脱离文档流的意思就是高于原文档流内盒子的显示层次，浮动有一个清浮动操作,可以让子级从新撑开父级高度
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>浮动布局</title>
<style>
.box{
200px;
height: 80px;
background-color: red;
border: 1px solid black;
/*浮动有一个清浮动操作,可以让子级从新撑开父级高度*/
float: left;
}
/*这个就是清浮动的写法，用父类伪类来写*/
/*子浮动,父级开启清浮动,父级的兄弟显示区域正常*/
.sup:after{
content: "";
display: block;
clear: both;
}
.ele{
200px;
height: 80px;
background-color: red;
border: 1px solid black;
}
</style>
</head>
<body>
<div class="sup">
<div class="box">1</div>
<div class="box">2</div>
<div class="box">3</div>
</div>
<div>
<div class="ele">4</div>
</div>
</body>
</html>
浮动布局实例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>浮动布局实例</title>
<!--清除默认样式-->
<link rel="stylesheet" href="css/reset.css">
<style>
.header{
1210px;
height: 100px;
background-color: red;
/*区域块水平居中*/
margin-left: auto;
margin-right: auto;
/*margin: 0 auto; 这是上面两行的简写，这里后面有四个值，代表上下左右，如果用auto,则只要写2个值，第一个0代表的是上，第二个代表右，规则就是找对边的参数，顺时针下没有找上，左没有找右，这样的下来就是上下0，左右auto*/
}
/*父级的宽度决定子级一排排列的个数*/
.nav{
1210px;
margin: 0 auto;
}
/*父级标签为什么要清浮动：高度需要子级撑开，因为不能设置死，子级可以设置高度，但不一定准确*/
.nav:after{
content: "";
display: block;
clear: both;
}
/*子标签浮动：同行显示*/
.nav li{
200px;
height: 48px;
background-color: black;
float: left;
}
.body{
1210px;
height: 100px;
margin: 0 auto;
background-color: darkolivegreen;
}
/*nav标签下子级的选择，这个括号1就表示第一个,width表示高度位置，backgroud里面设置精灵图的位置，第一个不动所以不需要参数*/
.nav li:nth-child(1){
155px;
/*将精灵图显示在第一个子区域*/
background: url("img/bg.png") no-repeat;
}
.nav li:nth-child(2){
157px;
/*将精灵图显示在第2个子区域,由于要显示的区域在精灵图的第二个位置，所以要调整位置，-155就是右移，后面的0就是表示y轴不动*/
background: url("img/bg.png") no-repeat -155px 0;
}
/*这里第三个标签就是行高位置不动，宽位置需要移动，所以要在前面标签的基础上还要减去157像素，利用calc函数完成减法*/
.nav li:nth-child(3){
167px;
background: url("img/bg.png") no-repeat calc(-155px - 157px) 0;
}
.nav li:nth-child(4){
158px;
background: url("img/bg.png") no-repeat calc(-155px - 157px - 167px) 0;
}
.nav li:nth-child(5){
101px;
background: url("img/bg.png") no-repeat calc(-155px - 157px - 167px - 158px) 0;
}
.nav li:nth-child(6){
185px;
background: url("img/bg.png") no-repeat calc(-155px - 157px - 167px - 158px - 101px) 0;
}
.nav li:nth-child(7){
177px;
background: url("img/bg.png") no-repeat calc(-155px - 157px - 167px - 158px - 101px - 185px) 0;
}
/*如果开启悬停后没有生效，则要检查优先级，这里要写在最后*/
.nav li:hover{
/*.nav li:nth-child(1):hover 这个就是给单独的标签设置悬停效果*/
/*如果所有区域是统一位置，则开启悬停效果不需要单独设置，y轴上移*/
background-position-y:-48px;
}
</style>
</head>
<body>
<div class="header"></div>
<ul class="nav">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
<div class="body"></div>
</body>
</html>