网站开发与部署题库石家庄网站建设seo
标准流：
标准流就是元素在页面中的默认排列方式，也就是元素在页面中的默认位置。
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---推荐使用---即 可以清除浮动干扰，同时又能解决父盒子高度塌陷的问题