Offer 驾到，掘友接招！我正在参与2022春招系列活动-刷题打卡任务，点击查看活动详情。

一、定位知识点

（一）浮动布局

• 脱离文档流：浮动的元素会脱离文档流
• 浮动是对后面元素的影响，对前面的元素没有影响
• 浮动边界：浮动元素边界不能超过父元素的padding
• 转块元素：元素浮动后会变为块元素包括行元素如 span，所以浮动后的元素可以设置宽高

clear清除浮动

CSS提供了 clear 规则用于清除元素浮动影响。

AFTER清除浮动

使用 ::after 伪类为父元素添加后标签，实现清除浮动影响。

OVERFLOW清除浮动

子元素使用浮动后将不占用空间，这时父元素高度为将为零。通过添加父元素并设置 overflow 属性可以清除浮动。因为这样会使父元素产生 BFC 机制，即父元素的高度计算会包括浮动元素的高度。

（二）绝对定位

• 绝对定位元素不受文档流影响
• 绝对定位元素拥有行内块特性
• 若父元素设置了 relative | fixed | sticky属性值 ，绝对定位子元素将参数此父元素进行定位
• 位置受父元素padding等属性影响

（三）flex布局

（四）表格布局

（五）grid布局

二、面试题

• 题目：假设高度已知，请写出三栏布局，其中左栏、右栏宽度各位300px，之间自适应

（一）浮动解决方案

• 缺点：最常见的问题在于清除浮动，如果没清理好，容易脱离文档流
• 优点：它的兼容性很好

代码实现如下：

（二）绝对定位解决方案

• 优点：快捷，而且不容易出问题
• 缺点：它脱离的文档流，那么它之后的元素也要脱离文档流，这样就导致这种方法的有效性和可使用性不高

代码实现如下：

（三）flex布局解决方案

• css3中提出的布局方式，目的就是解决上面两者方式的不足

代码实现如下：

（四）表格布局解决方案

• 优点：兼容性很好
• 缺点：当其中一栏的高度增加时，其他两栏也会增加，因此它不适合三栏高度不一样的场景

代码实现如下：

（五）grid布局解决方案

• 优点：使用grid可以实现很多复杂的事情，但是代码量减少很多

代码实现如下：

（六）如果高度去掉如何实现，哪些方法还能使用（兼容性最强）

• 如果去掉高度，flex布局和表格布局能用