当前位置：首页 > news >正文

re:从0开始的CSS学习之路 11. 盒子垂直布局

news 2025/7/14 17:27:47

1. 盒子的垂直布局的注意

若两个“相邻”垂直摆放的盒子，上面盒子的下外边距与下面盒子的上外边距会发生重叠，称为外边距合并
若合并后，外边距会选择重叠外边距的较大值
若两个盒子具有父子关系，则两个盒子的上外边距会发生重叠，若改变盒子的上外边距，父子盒子都会随之移动位置
三种解决办法：
1. 可以为父元素添加边框
2. 可以为父元素添加内边距
3. 为父元素添加overflow: hidden;
学习完浮清除动元素的最终解决方案：
```
.clearfix::after,
.clearfix::before {content: "";display: table;clear: both;
}
```

示例如下：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>div {width: 200px;height: 200px;}/* .box1 {background-color: #c7edcc;margin-bottom: 300px;}.box2 {background-color: #fde6e0;margin-top: 200px;} */.clearfix::after,.clearfix::before {content: "";display: table;clear: both;}.father {background-color: #c7edcc;/* border: 1px solid #000; *//* padding: 1px; *//* overflow: hidden; */}.son {width: 100px;height: 100px;background-color: #fde6e0;margin-top: 100px;}
</head><body><div class="father clearfix"><div class="son"></div></div><!-- <div class="box1"></div><div class="box2"></div> -->
</body></html>