浮动
一. 浮动
1.作用
用来实现网页中水平布局的结构（让块元素可以放置在同一行）。
2.实现方式
给想要放置在同一行的元素添加float属性即可。
注意：给元素添加上float属性之后，该元素会提升层级，脱离文档流。 会影响到之前在同一个层级上的元素，当前float的元素层级提升，之前的层级位置空出，后面的元素自动占据之前的位置，所以就看到覆盖的效果。
3.浮动原理
a.当给一个元素添加了float属性，该属性会给元素实现两个功能（1.可以提升层级 2.可以允许当前元素的这一行能够放置其他浮动元素了）。
b.Float的值left和right，决定的当前浮动元素放置在这一行时，放到什么位置，left最左边，right最右边。
c.当一个元素浮动时，会先去查找前面有没有同级别的浮动元素，如果有，就往后放，如果放的时候，没有空间了，则被挤到下一行。当被挤到下一行时，当前元素的上边界会根据当前元素的浮动方向（left，right），保持和上一个浮动方向相同的元素的下边界重合。
当前元素是左浮动元素left，则会和上一个左浮动元素下边界重合。
当前元素是右浮动元素right，则会和上一个右浮动元素下边界重合。
注意：如果一个元素既可以使用左浮动，又可以使用右浮动时，一定要注意，使用哪个浮动方向不会影响自己，是影响的下一个浮动元素。
二. 浮动产生的问题以及解决办法
1.影响兄弟元素布局
2.父元素高度塌陷
原因：当子元素添加float属性之后，元素浮动了，则会影响父元素动态识别子元素的高度，浮动元素的高度父元素无法识别。
解决方案1：给父元素指定一个高度即可。 但是这种方式不通用。
解决方案2：给父元素添加overflow:hidden;属性即可。
三.浮动练习1-左右布局
效果图：
实现代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>左右布局</title>
<style type="text/css">
.left{
width: 200px;
height: 800px;
background-color: yellow;
/*字体*/
font-size: 50px;
/*水平居中*/
text-align: center;
/*垂直居中*/
line-height: 800px;
/*浮动*/
float: left;
}
.right{
width: 800px;
height: 800px ;
background-color: red;
/*字体*/
font-size: 50px;
/*水平居中*/
text-align: center;
/*垂直居中*/
line-height: 800px;
/*浮动*/
float: left;
}
</style>
</head>
<body>
<div class="left">
左
</div>
<div class="right">
右
</div>
</body>
</html>
四.浮动练习2-左中右布局
效果图（注意 这里的文字是居中的）：
实现代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>左中右布局</title>
<style type="text/css">
.wrap{
/*让元素水平居中*/
margin: 0 auto;
width: 1000px;
border: 5px solid red;
/*方法一*/
/*height: 800px;*/
/*方法二*/
overflow: hidden;
}
.left{
width: 100px;
height: 800px;
background-color: yellow;
/*文字*/
font-size:50px;
color:white;
text-align: center;
/*垂直居中*/
line-height:800px;
float: left;
}
.middle{
width: 800px;
height: 800px;
background-color:red;
/*文字*/
font-size:50px;
color:white;
text-align: center;
/*垂直居中*/
line-height:800px;
float: left;
}
.right{
width: 100px;
height: 800px;
background-color: blue;
/*文字*/
font-size:50px;
color:white;
text-align: center;
/*垂直居中*/
line-height:800px;
float: left;
}
</style>
</head>
<body>
<div class="wrap">
<div class="left">
左
</div>
<div class="middle">
中
</div>
<div class="right">
右
</div>
</div>
</body>
</html>
五.浮动练习3-12宫格布局
效果图：
实现代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>12宫格-浮动</title>
<style type="text/css">
.wrap{
/*水平居中*/
margin: 0 auto;
width: 500px;
text-align: center;
border: 1px solid black;
/*处理因子元素浮动导致父元素塌陷问题*/
overflow: hidden;
}
.wrap>div{
font-size:50px;
color:white;
text-align: center;
}
.green{
width: 100px;
height: 100px;
background-color: green;
/*一行文字垂直居中*/
line-height:100px;
/*浮动*/
float: left;
}
.f6{
width: 300px;
height: 100px;
background-color: yellow;
/*一行文字垂直居中*/
line-height:100px;
/*浮动*/
float: left;
}
.f7{
width: 200px;
height: 200px;
background-color: lightblue;
/*一行文字垂直居中*/
line-height:200px;
/*浮动*/
float: right;
}
.f8{
width: 150px;
height: 150px;
background-color: gray;
/*一行文字垂直居中*/
line-height:150px;
/*浮动*/
float: left;
}
.f9{
width: 150px;
height: 150px;
background-color: black;
/*一行文字垂直居中*/
line-height:150px;
/*浮动*/
float: left;
}
.f10{
width: 200px;
height: 150px;
background-color: aqua;
/*一行文字垂直居中*/
line-height:150px;
/*浮动*/
float: right;
}
.f11{
width: 300px;
height: 100px;
background-color: red;
/*一行文字垂直居中*/
line-height:100px;
/*浮动*/
float: left;
}
.f12{
width: 500px;
height: 100px;
background-color: blue;
/*一行文字垂直居中*/
line-height:100px;
/*浮动*/
float: left;
}
</style>
</head>
<body>
<div class="wrap">
<!--.f${$}*12-->
<div class="f1 green">1</div>
<div class="f2 green">2</div>
<div class="f3 green">3</div>
<div class="f4 green">4</div>
<div class="f5 green">5</div>
<div class="f6">6</div>
<div class="f7">7</div>
<div class="f8">8</div>
<div class="f9">9</div>
<div class="f10">10</div>
<div class="f11">11</div>
<div class="f12">12</div>
</div>
</body>
</html>
上一篇： 详解为什么指针被誉为C语言灵魂