1.浮动原理
多个盒子的布局
2.多个盒子布局的种类
2.1普通流布局（标准流布局）
按照默认的方式排列
2.2浮动布局
转换为行内块元素，但是却很难把空白缝隙去掉
2.3定位布局
2.4元素类型的转换
display:block;块级元素
display:inline;行内元素
display:inline-block;行内块元素
块级元素：{div、hr、p、h1~h6、ul、ol、from、table、...}独占一行，自上而下排列、能够识别宽高，margin和padding都有效，自动换行
行内元素：{span、a、i、em、...}从左到右，碰到父元素边框自动换行、宽高无效，margin左右有效，上下无效，padding上下左右都有效，不会自动换行
行内块元素：不自动换行、从左到右排列、能够识别宽高{块级元素添加display:inline-block}
3.浮动
3.1应用场景：
多个块级元素一行排列
3.2浮动定义：
float:left; 左浮动
float:none;不浮动
floatLright;右浮动
浮动一般使用float属性,将其移动到一边,直到左边缘或者右边缘直到包块框或另一个浮动框的边框
3.3浮动解决缝隙
添加float属性，可以让块级元素在一行显示，并且不像inline-block让块级元素变成行内块元素会有空隙
3.4浮动的特点：
3.4.1.浮动的盒子会脱离标准流
1.脱离标准普通流的控制移动到制定的位置（专业术语:脱标）
2.浮动的盒子不再保留原来的位置
背景挤走，文本等后边显示
相同大小或宽度相同，会挤到下一行
3.4.2浮动元素会具有行内块元素的特性
添加浮动元素后会让行内元素出现宽高属性的显示
3.4.3块级元素添加浮动效果
块级元素不添加宽度，会默认父级元素的宽度，添加float属性后为文本长度
3.4.4浮动的盒子只会影响后面的标准流，不会影响前面的标准流
左浮动，右浮动，都会空出属于标准行的空间
3.5浮动的问题及解决：
浮动的父元素塌陷
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
.father{
border: 2px red solid;
width: 700px;
margin: 0 auto;
}
#one{
width: 200px;
height: 200px;
background-color: blue;
float: left;
}
#two{
width: 300px;
height: 300px;
background-color: burlywood;
float: left;
}
#brother{
height: 200px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="father clear">
<div id="one"></div>
<div id="two"></div>
</div>
<div id="brother"></div>
</body>
</html>浮动不占位置，父元素没有指定高度，会坍塌
解决：
1.在最后添加一个空标签，设置clear:both;此时清除左右浮动，父元素被子元素撑开，不会塌陷（父级元素添加高度会降低可拓展性）
#clear{
clear: both;
}
2.给父级元素添加overflow属性
#father{
overflow:hidden;
}
3.给父级元素添加一个伪元素after
.clear:after{
content: "";
display: block;
height: 0;
clear: both;
}
纯css实现
解决塌陷：
2451
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
