为什么需要浮动？
- 想要把多个块级元素放在一行显示，打破常规布局
使用行内块级元素布局页面有一定的局限性，中间会有空白的间隙。实际开发中盒子之间的间隙是有严格的要求的
浮动的语法
左浮动：float:left;
右浮动：float:right;
浮动的特点
1.浮动元素会脱离标准流（简称：脱标），在标准流中不占位置（相当于从地面飘到了空中）
2.浮动元素比标准流高出半个级别，可以覆盖标准流中的元素
3.浮动找浮动(同方向浮动)，下一个浮动元素会在上一个浮动元素后面左右浮动
4.浮动元素会受到上面元素边界的影响
5.浮动元素有特殊的显示效果：① 一行可以显示多个 ② 可以设置宽高
- 注意：浮动的元素不能通过text-align:center或者margin:0 auto
浮动布局注意事项:
1.浮动一般情况下和标准流的父盒子一起搭配使用.
♥先用标准流的父元素排列上下位置, 之后内部子元素采取浮动排列左右位置
2 浮动的时候,当父元素装不下浮动的子元素时,子元素会如何显示?
♥浮动时,当父亲装不下浮动的子元素,此时此子元素会换行显示
3.一个元素浮动了，理论上其余的兄弟元素也要浮动,以防止引起问题?
♥浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流.
一浮全浮
浮动的案例
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.header {
height: 40px;
background-color: #333;
}
.box {
width: 1226px;
height: 100px;
background-color: pink;
margin: 0 auto;
}
.banner {
width: 1226px;
height: 460px;
background-color: red;
margin: 0 auto;
}
.left {
float: left;
width: 234px;
height: 460px;
background-color: #ffa500;
}
.right {
float: right;
width: 992px;
height: 460px;
background-color: #87ceeb;
}
</style>
</head>
<body>
<header class="header"></header>
<div class="box"></div>
<div class="banner">
<div class="left">左边</div>
<div class="right">右边</div>
</div>
</body>
