标准流：
标准流就是元素在页面中的默认排列方式，也就是元素在页面中的默认位置。
1.1 块元素----独占一行----从上到下排列
1.2 行内元素----不独占一行----从左到右排列，遇到边界换行
1.3 行内块元素----不独占一行----从左到右排列，遇到边界换行
2.浮动:float
1.属性：
left---向左浮动
right---向右浮动
2.浮动的特点：
2.1 脱标---脱离标准流,释放当前盒子的默认位置---影响父盒子的高度
2.2 浮动的方向---水平方向（左，右，没有中间）
2.3 本质将元素转换为行内块元素---横向排列，并且可以设置宽高
标签代码:
<div class="left">左</div> <div class="right">右</div>
样式代码:
<style> div { height: 200px; width: 300px; } .left { background-color: aqua; /* 浮动到左 */ float: left; } .right { background-color: burlywood; /* 浮动到左 */ float: left; /* 浮动到右 */ /* float: right; */ } </style>
效果:
小案例:
标签代码:
<ul> <li><a href="">首页</a></li> <li><a href="">菜鸟工具</a></li> <li><a href="">菜鸟笔记</a></li> <li><a href="">参考手册</a></li> <li><a href="">用户笔记</a></li> <li><a href="">测验/考试</a></li> <li><a href="">本地书签</a></li> </ul>
样式代码:
<style> ul { height: 50px; line-height: 50px; list-style: none; background-color: rgb(84, 145, 84); } ul li { float: left; padding: 0 15px; } ul li a { text-decoration: none; color: rgb(255, 255, 255); } </style>
效果:
3.浮动清除:
方法一(额外标签法):在父元素内容的最后添加一个块级元素，设置 CSS 属性 clear: both
方法二(双伪元素法[推荐]):
/* before 解决外边距塌陷问题 */ /* 双伪元素法 */ .clearfix::before, .clearfix::after { /* 插入的内容 */ content: ""; display: table; } /* after 清除浮动 */ .clearfix::after { clear: both; }
方法三(单伪元素法):
方法四(overflow [推荐]):父元素添加 CSS 属性 overflow: hidden
方法五:给父盒子设置高度[不推荐]
1.浮动后的影响：
1.1.父盒子的高度塌陷，背景颜色不会被子盒子撑开
1.2.父盒子下边的其他元素会上移
2.浮动的清除：
方法一：额外标签法---在浮动的盒子后面添加一个空的标签，设置clear:both---不推荐使用
方法二：给父盒子添加固定高度---不推荐使用---动态数据列表不适用
方法三：单伪元素法---给父盒子添加:after伪元素，设置clear:both---推荐使用
方法四：双伪元素法---给父盒子添加:before和:after伪元素，设置clear:both---推荐使用---即 可以清除浮动干扰，同时又能解决父盒子高度塌陷的问题
