一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第9天，点击查看活动详情。

父级边框塌陷的问题

• clear：right； 右侧不允许有浮动元素
• clear：left； 左侧不允许有浮动元素
• clear：both； 两侧不允许有浮动元素
• clear：none；
• 解决方案： 1.增加父级元素高度

2.增加一个空的div标签，消除浮动

div{
clear:both;
margin:0;
padding 0;
}

3.在父级元素中增加一个 overflow：hidden；

4.父类添加一个伪类：after

#father：after{
content:'';
display:block;
clear:both;
}

小结：

• 浮动元素后面增加空的div 简单，代码中尽量避免空的div
• 设置父元素的高度 简单，元素假设有了固定的高度，就会被限制
• overflow 简单，下拉的一些场景避免使用
• 父类添加一个伪类：after（推荐） 写法稍微复杂一点，但是没有副作用，推荐使用

对比

• display 方向不可以控制
• floa 浮动起来的话会脱离标准文档流，所以要解决父级边框塌陷问题

定位

相对定位

相对定位：possition：relative； 相对原来的位置，进行指定的偏移，相对定位的话，它依然在标准文档流中，原来的位置会被保留

top:-20px;
left:20px;
bottom:-10px;
ringht:20px;

绝对定位

#box_relative {
  position: absolute;
  left: 30px;
  top: 20px;
}

定位：基于xxx定位，上下左右

1.没有父级元素定位的前提下，相对于浏览器定位

2.假设父级元素存在定位，我们通常会相对于父级元素进行偏移

3.在父级元素范围内移动，相对于父级或者浏览器的位置，进行指定的偏移，绝对定位的话，它不在标准文档流中，原来的位置不会被保留

固定定位fiex

possition：flxed；

被固定定位的div盒子会随着屏幕上下移动

z-index

z-index：默认是0，最高无限-999