lanlin
CSS清除浮动无效 or CSS clear both not working
背景
你明明已经使用了 clear:both 但是错位问题还是存在。
明确概念
-
清除浮动是清除掉 “当前元素” “前面” 的 “兄弟级浮动元素” 对 “当前元素” 的影响。
-
clear 属性只是在 block 元素是起作用，如果你把 clear:both 用在一个 inline-block 或 inline 元素上，clear:both 是不会起任何作用的。
说明
<div class="A1">class A1</div>
<div class="A2">class A2</div>
<div class="B">
<div class="B1">class B1</div>
<div class="B2">class B2</div>
</div>
<div class="C">class C</div>
.A1 { float:left; }
.A2 { float: right; }
.B { clear: both; }
.B1, .B2, C { float: left; }
当前元素，指带有 clear 属性的元素，如例子中的 .B 与 .B:after。
比如 .B 元素的 clear 清除的不是它的子元素（.B1, .B2）的浮动。 而是清除排在他前面的同级元素（.A1, .A2）的浮动。
因此，.B 的 clear 对排在后面的同级元素 （.C）也是没有效果的。
情形一，消除内部浮动的影响
如果一个元素里的内部子元素都是浮动元素，那它的高度会是0。
如果想要它的高度实现自适应，那我们需要清除它的子元素的浮动。
我们可以采用一种叫做 clearfix 的方法，就是 clear 一个不浮动的 ::after 伪元素。
以说明中的 .B 元素为例
# 第一种写法
.B::after {
content: "";
display: block;
clear: both;
}
# 第二种写法
.B::after {
clear:both;
content:".";
display:block;
height:0;
line-height:0;
visibility:hidden;
}
特别说明：
::before 和 ::after 的作用是在指定的元素内容（而不是元素本身）之前或者之后插入一个包含 content 属性指定内容的行内元素。
所以，上面的写法只能清除 .B 子元素的浮动，并不会清除 .B 本身的浮动。
情形二，消除外部浮动的影响
要消除外部浮动对当前元素的影响，直接对当前元素使用 clear:both 吧。
简单解释就是，为了避免前面的兄弟影响到我，我给自己加了一个 clear:both 的 buff
情形三，用 BFC 进行强制隔离
BFC (Block formatting context) 直译为 "块级格式化上下文"。
具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素，并且 BFC 具有普通容器所没有的一些特性。
简单来说，可以把 BFC 理解为一个封闭的大箱子，箱子内部的元素无论如何翻江倒海，都不会影响到外部。
这算是一个加强版的 情形一，不仅对浮动清除起作用，对其他很多可能对外部造成影响的也能起作用。简单、粗暴，就像是屏蔽效果一样。
创建 BFC 的方法：
-
根元素或包含根元素的元素
-
浮动元素（元素的 float 不是 none）
-
绝对定位元素（元素的 position 为 absolute 或 fixed）
-
行内块元素（元素的 display 为 inline-block）
-
表格单元格（元素的 display为 table-cell，HTML表格单元格默认为该值）
-
表格标题（元素的 display 为 table-caption，HTML表格标题默认为该值）
-
匿名表格单元格元素（元素的 display为 table、table-row、 table-row-group、table-header-group、table-footer-group（分别是HTML table、row、tbody、thead、tfoot的默认属性）或 inline-table）
-
overflow 值不为 visible 的块元素
-
display 值为 flow-root 的元素
-
contain 值为 layout、content或 strict 的元素
-
弹性元素（display为 flex 或 inline-flex元素的直接子元素）
-
网格元素（display为 grid 或 inline-grid 元素的直接子元素）
-
多列容器（元素的 column-count 或 column-width 不为 auto，包括 column-count 为 1）
-
column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中
参考文章
https://developer.mozilla.org/zh-CN/docs/Web/CSS/clear https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context https://segmentfault.com/a/1190000014554601
