浮动

浮动属性：float:none/left/right;

1）谁在HTML中更靠上，谁就更靠边缘；

2）float属性会使标签浮动起来，脱离原先的文档流，他下面的标签就会占据他原来的位置

3）当可用区域一行放不下的时候，浮动元素会自动换行；

4）当可用区域不均匀时，第二行的浮动元素会优先排列在靠上的位置在往浮动方向靠近；

5）浮动属性只会影响到下面的标签，上面的标签不会受到影响；

6）高度塌陷：当父容器没有设置高度时，子容器设置浮动效果可能会造成父容器的高度为零，导致父标签下面的标签产生一些负面效果（当然有时也可以使用这种负面效果达成文字环绕的效果），解决这个问题的方法：a）给父容器人为加一个高度；b）可以给父容器加一个overflow:hidden; （这种方法更灵活，因为不用考虑子元素的变化）来解决这个问题；

浮动清除：clear大家都叫清除浮动，但他是用于控制元素不受他上一个浮动元素的影响，如果是非浮动元素，加上clear属性后不会在钻到上一个浮动元素下面了，如果是浮动元素，就会在上一个浮动元素后换行在浮动，当然clear也分left、right、both，需要对应上一级浮动元素的浮动方向才能生效；例如上层浮动元素右浮动，下层元素左浮动，下层做浮动元素加上clear:right后的显示效果：

块级元素的左右居中：margin:0 auto;

display:block; 将图片变成类似div的块级标签；

display:inline-block;

inline：使元素变成行内元素（内联），拥有行内元素的特性，即

1.与其他行内元素共享一行 ;

2.不能修改width、height属性，大小由内容撑开 ;

3.padding属性 top、right、bottom、left设置都有效；margin属性只有left、right设置有效;
block： 使元素变成块级元素，拥有块级的特性，即

1.独占一行，在不设置自己的宽度的情况下，块级元素会默认填满父级元素的宽度

2.可以修改width、height属性

3.padding、margin四个方向的值设置均有效

两者联合起来意译就为变成行内的块级元素；它的作用是将独占一行的块级元素设置为行内块级元素，把内容体排成一行，不需要使用float来对块级元素进行浮动；链接：https://blog.csdn.net/weixin_40047834/article/details/80436128；

display:none; 隐藏

display:flex； 转成弹性盒子

display:grid; 转成网格布局