一、清除浮动
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
粘性定位
。
使用定位的时候通常遵循父相子绝;
有些元素需要微调位置的时候,使用相对定位;
实现吸顶效果的时候使用粘性定位;
定位相对的位置,参考物是设置过定位的离自己最近的祖宗标签。