今天分享一下我遇到的一个面试题，是关于CSS浮动布局的问题，问的是CSS清除浮动的方法有哪些？

🧽什么是浮动布局

• 首先我们要知道CSS浮动布局是使用的float属性来设置的，CSS的float属性将元素放在其容器的左侧或右侧，允许文本和内联元素环绕它。该元素将从页面的正常流中删除，但仍保留为流的一部分。（与绝对定位相反， 绝对定位的元素忽略float属性）
• float的属性值

• 使用语法

/* Keyword values */float: left;
float: right;
float: none;
float: inline-start;
float: inline-end;
/* Global values */float: inherit;
float: initial;
float: revert;
float: revert-layer;
float: unset;
/*left元素必须浮动在其包含块的左侧。right元素必须浮动在其包含块的右侧。none元素不得浮动。inline-start元素必须浮动在其包含块的起始侧。左边是脚本，右边是脚本。ltrrtlinline-end元素必须浮动在其包含块的末端。这是脚本的右侧，脚本的左侧。ltrrtl*/

• 具体在页面中怎么浮动就不演示了

🧽clear属性

• CSS的clear属性指定一个元素是否必须移动 (清除浮动后) 到在它之前的浮动元素下面。clear 属性适用于浮动和非浮动元素。
• clear的属性值

• 使用语法

/* Keyword values */clear: none;
clear: left;
clear: right;
clear: both;
clear: inline-start;
clear: inline-end;
/* Global values */clear: inherit;
clear: initial;
clear: unset;
/* none元素不会被向下移动以清除浮动。left元素被向下移动以清除左浮动。right元素被向下移动以清除右浮动。both元素被向下移动以清除左右浮动。inline-start元素被向下移动以清除其包含块的起始侧浮动，即 ltr 时清除左浮动，rtl 时清除右浮动。inline-end元素被向下移动以清除其包含块的结束侧浮动，即 ltr 时清除右浮动，rtl 时清除左浮动。*/

• 其中，使用带clear属性（设置为clear:both）空标签就是清除浮动的方法之一

🧽清除浮动其他方法

• 🧼使用CSS overflow属性
  
• 如果一个元素比包含它的元素高，并且它是浮动的，它将“溢出”到其容器之外：
  然后我们可以向包含元素添加 overflow: auto; overflow: hidden;，来解决此问题
  

#container {
overflow: auto;
/*overflow: hidden;*/}

• 🧼使用CSS ::after伪元素（clearfix Hack）
  
• 如果一个元素里只有浮动元素，那它的高度会是 0。如果你想要它自适应即包含所有浮动元素，那你需要清除它的子元素。一种方法叫做clearfix，即clear一个不浮动的 ::after 伪元素。

/* ::after 选择器向选定的元素之后插入内容  content:" "; （注意这里有一个空格）生成内容为空  display: block; clear:both; 清除前面元素浮动带来的影响  */.container::after {
content: "";
display: block;
clear: both;
}

• 另一种写法
  

.container::after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

• 具体在页面中的清除效果就不演示了