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 粘性定位 。

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

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

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