本文详细探讨了Web前端开发中的float浮动和position定位。内容包括float的浮动概念、清除浮动的方法，以及position的relative、absolute、fixed和sticky四种定位方式的原理和应用场景。还提供了一个实现下拉菜单的定位小练习。
Web前端开发笔记-----13.float浮动、position定位
文章目录
一、float浮动
1.float浮动概念和原理
文档流：
文档流是文档中可显示对象在排列时所占的位置。
float特性：
加浮动的元素，会脱离文档流，会延迟父容器靠左或靠右排列，如果之前已经有浮动的元素，会挨着浮动的元素进行排列。
取值：
left
right
none
注意点：
1.只会影响后面的元素。
2.内容默认提升半层。（用于图文混排）
3.默认宽根据内容决定。
4.换行排列。
5.主要给块元素添加，但也可以给内联元素添加。
2.清除float浮动
为了消除float浮动对下面布局的影响，这时需要进行清除浮动的操作。
上下排列：clear属性 取值：left right both
嵌套排列：
固定宽高：不推荐，把父容器高度固定死，不适合做自适应的效果。
父元素浮动：不推荐，因为父容器浮动也会影响到后面的元素。
overflow：hidden，如果有子元素想溢出，那么会受到影响。
display：inline-block，不推荐，父容器会影响到后面的元素。
设置空标签：不推荐，会多添加一个标签。
做法：
<style>
#box1{
width: 200px; border: 1px solid black;}
#box2{
width: 100px; height: 100px;background-color: red; float: left;}
#class{
clear: both;}
</style>
</head>
<body>
<div id="box1">
<div id="box2"></div>
<div id="class"></div> //这是一个空标签
</div>
aaaaaaa
after伪类：推荐，是空标
最低0.47元/天 解锁文章
670
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
