📚文章目录

🧽什么是浮动布局

🧽clear属性​​​​​​

🧽清除浮动其他方法

🧼使用CSSoverflow属性

🧼使用CSS ::after伪元素（clearfix Hack）

今天分享一下我遇到的一个面试题，是关于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）空标签就是清除浮动的方法之一

🧽清除浮动其他方法

🧼使用CSSoverflow属性

如果一个元素比包含它的元素高，并且它是浮动的，它将“溢出”到其容器之外：

然后我们可以向包含元素添加 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;}

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