css总结

一、清除浮动

1. 在浮动元素后面添加空div，设置 clear:both 样式可以解决

2. 在浮动元素的父标签，添加after伪元素，设置：

2.1: 空内容

2.2: 转块元素

2.3: clear:both

3. 给父标签添加 overflow: hidden 。原理是触发BFC。

BFC： Block Formatting Context 。中文名称：块级格式化上下文，指的是当前网页是按照块元素的特性进行排列的格式。触发BFC，意思是让当前环境和后续元素继续按照块元素的格式进行排列。

二、外边距合并怎么解决

父和子

上外边距会合并。

1. 给父标签添加 overflow: hidden 。原理是触发BFC。

2. 将子的外边距换成父的内填充

3. 给父标签添加上边框

兄弟标签

上面盒子的下外边距和下面盒子的上外边距会合并。

尽量避免。设置在一个标签上。

三、div水平并垂直居中

1. 给父设置定位，给子设置定位 left: 50%; top: 50%; transform: translate(-50%,-50%);

2. 使用弹性布局，父标签设置 display: flex; justify-content: center; align-items: center;

3. 将子转成行内块，设置 verticle-align: middle ，给父设置 text-align: center

4. 网格布局(可能有人叫栅格布局)，给父设置 display: grid; justify-content: center; align-items:

center;

四、定位

定位就是让元素可以排列在随意的一个位置，通常使用position属性，定位有5种： static静态定位、relative相对定位、absolute绝对定位、fixed固定定位、sticky粘性定位 。

使用定位的时候通常遵循父相子绝；

有些元素需要微调位置的时候，使用相对定位；实现吸顶效果的时候使用粘性定位；

定位相对的位置，参考物是设置过定位的离自己最近的祖宗标签。