10.2.2清除浮动
浮动副作用
当元素设置float浮动后，该元素就会脱离文档流并向左/向右浮动，
- 浮动元素会造成父元素高度塌陷
- 后续元素会受到影响
<style> .box{ width: 200px; height: 200px; background-color: red; position: relative; left: 100px; } </style> <div class="box"></div>
<style> .box1{ width: 200px; height: 200px; background-color: red; position:absolute; left: 50px; } .box2{ width: 300px; height: 300px; background-color: green; } </style> <div class="box1"></div> <div class="box2"></div>
清除浮动
当父元素出现塌陷的时候，对布局是不利的，所以我们必须清除副作用
解决方案有很多种
- 父元素设置高度
- 受影响的元素增加clear属性
- overflow清除浮动
- 伪对象方式
父元素设置高度
如果父元素高度塌陷，可以给父元素设置高度，撑开元素本身大小
<style> .box1{ width: 200px; height: 200px; background-color: red; position:fixed; left: 50px; } .box2{ width: 300px; height: 300px; background-color: green; } </style> <div class="box1"></div> <div class="box2"></div>
overflow清除浮动
如果有父级塌陷，并且同级元素也收到了影响，可以使用overflow清除浮动
这种情况下，父布局不能设置高度
父级标签的样式里面加: overflow:hidden;clear: both;
<style> .box1{ width: 200px; height: 200px; background-color: red; position:absolute; z-index: 2; } .box2{ width: 300px; height: 300px; background-color: green; position:absolute; z-index: 1; } </style> <div class="box1"></div> <div class="box2"></div>
伪对象方式
如果有父级塌陷，并且同级元素也收到了影响，还可以使用伪对象方式处理
为父标签添加伪类after,设置空的内容，并且使用clear:both;
这种情况下，父布局不能设置高度
<style> .container { width: 350px; border: 1px solid red; } .container::after { content: ""; display: block; clear: both; } .box { width: 100px; height: 100px; background-color: #fff176; float: left; margin: 5px; } .nav { width: 100px; height: 100px; background-color: red; } </style> <div class="container"> <div class="box"></div> <div class="box"></div> <div class="box"></div> </div> <div class="nav"></div>
十一、定位
position属性指定了元素的定位类型
| 值 | 描述 |
| relative | 相对定位 |
| absolute | 绝对定位 |
| fixed | 固定定位 |
其中，绝对定位和固定定位会脱离文档流
设置定位之后：可以使用四个方向值进行调整位置：left、top、right、bottom
11.1相对定位
<style> .box{ width: 200px; height: 200px; background-color: red; position: relative; left: 100px; } </style> <div class="box"></div>
11.2绝对定位
<style> .box1{ width: 200px; height: 200px; background-color: red; position:absolute; left: 50px; } .box2{ width: 300px; height: 300px; background-color: green; } </style> <div class="box1"></div> <div class="box2"></div>
11.3固定定位
<style> .box1{ width: 200px; height: 200px; background-color: red; position:fixed; left: 50px; } .box2{ width: 300px; height: 300px; background-color: green; } </style> <div class="box1"></div> <div class="box2"></div>
温馨提示
设置定位之后，相对定位和绝对定位他是相对于具有定位的父级元素进行位置调整，如果父级元素不存在定位，则继续向上逐级寻找，直到顶层文档。
11.4Z-index
z-index属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面
<style> .box1{ width: 200px; height: 200px; background-color: red; position:absolute; z-index: 2; } .box2{ width: 300px; height: 300px; background-color: green; position:absolute; z-index: 1; } </style> <div class="box1"></div> <div class="box2"></div>
