浮动有四个属性值可以设置 left | right | inherit | none
浮动元素会脱离文档流，不会继续停留在其父元素内。如果一个父元素只有一个子元素，那么它将会塌陷，就像是空的一样。

父级元素使用高度

因为浮动导致父元素高度塌陷，所以给父元素添加高度。

优点：简单、代码少、容易掌握

缺点：高度固定，如果两则皆不是固定高度，该方法不可用

建议：可以再少数固定高度的情况使用

css

1 2	.float-wraper{height: 100px;} .float-inner{float:left; width: 100px; height: 100px; background: #e2e2e2;}

html

1
2
3

<div class="float-wraper">
	<div class="float-inner"></div>
</div>

父级元素使用 overflow:hidden（BFC）

使用时浏览器会自动检测浮动区域的高度，如果父元素本身有高度，且子元素高度超出父元素高度，则超出部分被隐藏。同时使用使用width或者zoom:1 来兼容IE6 IE7。

优点：简单、代码少、浏览器支持好

缺点：和子元素使用position、父元素使用height配合时，小心子元素超出部分被隐藏；用于body不生效

建议：子元素不要使用position，父元素不要使用height

css

1 2	.float-wraper{overflow: hidden; zoom: 1;} .float-inner{float:left; width: 100px; height: 100px; background: #e2e2e2;}

html

1	<!-- 同上 -->

父级元素使用 overflow:auto（BFC）

使用方法同上。

css

1 2	.float-wraper{overflow: auto; zoom: 1;} .float-inner{float:left; width: 100px; height: 100px; background: #e2e2e2;}

html

1	<!-- 同上 -->

Tips：这两种方法统计为：使用overflow属性，把它设置为非默认值visible的值（auto、hidden、overlay、scroll）。

overflow之所以能够有效是因为当它的值是非visible时会创建一个BFC，而BFC的一个特性就是包裹浮动元素。

父级元素使用 display:table（BFC）

将div 的display变成table，使父元素高度不会塌陷。

css

1 2	.float-wraper{display: table;} .float-inner{float:left; width: 100px; height: 100px; background: #e2e2e2;}

html

1	<!-- 同上 -->

建议：不建议使用

父级元素使用 display:inlin-block（BFC）

将div 的display变成inlin-block，变成行内块元素后父元素高度不会塌陷。

*display 和*zoom为了兼容IE6 IE7

css

1 2	.float-wraper{display: inline-block; display: inline; zoom: 1;} .float-inner{float:left; width: 100px; height: 100px; background: #e2e2e2;}

html

1	<!-- 同上 -->

缺点：无法使用margin: 0 auto;居中

父级元素也使用浮动（BFC）

css

1 2	.float-wraper{float: left;} .float-inner{float:left; width: 100px; height: 100px; background: #e2e2e2;}

html

1	<!-- 同上 -->

缺点：会产生新的浮动，要一直浮动到body

建议：只作为了解

父级元素使用 display:flow-root（BFC）

原理同overflow!=visible，生成一个块元素框，用于建立新的块格式化上下文。

缺点：兼容浏览器Firefox 53+、Chrome 58+、Opera 45+

css

1 2	.flow-root-wraper{display: flow-root;} .flow-root-inner{float:left; width: 100px; height: 100px; background: #e2e2e2;}

html

1
2
3

<div class="flow-root-wraper">
  <div class="flow-root-inner"></div>
</div>

可以通过@supports条件判断兼容Edge

css

.flow-root-inner{float:left; width: 100px; height: 100px; background: #e2e2e2;}
.clearfix{
  display: flow-root;
}
@supports not (display:flow-root) { 
  .clearfix::after{content:" "; display:block; clear:both; visibility:hidden; height:0} 
  .clearfix{zoom:1} 
}

其他BFC属性和值

overflow: scroll | overlay
display: inline-table | table-cell | table-caption | table-row | table-row-group | table-footer-group | table-header-group | flex | inline-flex | group | inline-group | flow-root
contain: content | paint | layout
position: absolute | fixed

结尾处添加空元素clear: both

在结尾处清除浮动

css

1 2	.float-inner{float:left; width: 100px; height: 100px; background: #e2e2e2;} .float-clear{clear: both;}

html

<div class="float-wraper">
  <div class="float-inner"></div>
  <div class="float-clear"></div>
</div>

缺点：此方法需要在结尾添加一个节点，不够友好

结尾处添加br元素 clear=”both”

br标签自带clear属性，原理和上一个方法一样，在结尾处清除浮动

css

1	.float-inner{float:left; width: 100px; height: 100px; background: #e2e2e2;}

html

<div class="float-wraper">
  <div class="float-inner"></div>
  <br clear="both">
</div>

缺点：此方法需要在结尾添加一个节点，不够友好

父级元素添加after和zoom-(主流)

添加一个有内容的伪元素，设置成块级元素，清除尾部的浮动，同时设置成不可见，保证不占用位置。

为了兼容IE6 IE7使用zoom，IE8以上和非IE浏览器才支持::after

css

1
2
3

.float-inner{float:left; width: 100px; height: 100px; background: #e2e2e2;}
.clearfix::after{content:" "; display:block; clear:both; visibility:hidden; height:0} 
.clearfix{zoom:1}

html

1
2
3

<div class="float-wraper clearfix">
	<div class="float-inner"></div>
</div>

优点：浏览器支持好、不容易出现怪问题

参考

https://www.w3cplus.com/css/how-floating-works.html