什么是浮动？

float CSS属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流动(normal flow)中移除，尽管仍然保持部分的流动性。
本属于普通流中的元素，在使用 float 属性后，包含框内部由于不存在其他普通流元素了，也就表现出高度为0的情况。在实际布局中，往往这并不是我们所希望的，所以需要闭合浮动元素，使其包含框表现出正常的高，也就是让浮动内容和周围的内容等高。

清除浮动的方法

添加额外标签

通过在浮动元素末尾添加一个空的标签例如 <div style=”clear:both”></div> 。 

1
2
3
4
5
6
7
<div class="wrap" id="float">
    <h2>1）添加额外标签</h2>
    <div class="main">.main{float:left;}</div>
    <div class="side">.side{float:right;}</div>
    <div style="clear:both;"></div>
</div>
<div class="footer">.footer</div>

使用br标签和其自身的html属性

1
2
3
4
5
6
7
<div class="wrap" id="float">
    <h2>2）使用 br标签和其自身的 html属性</h2>
    <div class="main">.main{float:left;}</div>
    <div class="side">.side{float:right;}</div>
    <br clear="all" />
</div>
<div class="footer">.footer</div>

父元素设置 overflow：hidden

1
2
3
4
5
6
<div class="wrap" id="float" style="overflow:hidden; *zoom:1;">
    <h2>3)父元素设置 overflow: hidden </h2>
    <div class="main">.main{float:left;}</div>
    <div class="side">.side{float:right;}</div>
</div>
<div class="footer">.footer</div>

父元素设置 overflow：auto

1
2
3
4
5
6
<div class="wrap" id="float3" style="overflow:auto;">
    <h2>4)父元素设置 overflow: auto </h2>
    <div class="main">.main{float:left;}</div>
    <div class="side">.side{float:right;}</div>
</div>
<div class="footer">.footer</div>

父元素也设置浮动

父元素设置 display: table

父元素设置 display: flow-root

使用 :after 伪元素

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<style type="text/css">
.clearfix:after {
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
.clearfix {
    display: inline-block;
}  /* for IE/Mac */
</style>
<!--[if IE]>
<style type="text/css">
.clearfix {
    zoom: 1;/* triggers hasLayout */
    display: block;/* resets display for IE/Win */
} </style>
<![endif]-->

什么是块级格式上下文

块级格式上下文（Block Formatting Context，BFC ），是一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。

  • 默认布局时，区域高度包含浮动元素高度
  • 不同区域间相互独立，区域内的盒子和区域外的盒子互不影响
  • 不同区域不会发生外边距折叠

如何创建BFC

我们可以根据布局、溢出处理和有限布局，用不同方法创建块级格式上下文

  • 根元素 <html>
  • 无副作用：display: flow-root
  • 默认布局
    • 绝对定位：position: absolute 和 position: fixed
    • 浮动：float: left float: right
    • 行内块元素：display: inline-block
  • 溢出处理
    • 隐藏滚动条，裁剪溢出内容 overflow: hidden
    • 显示滚动条，裁剪溢出内容 overflow: scroll
    • 未溢出，隐藏滚动条，溢出，显示滚动条 overflow:auto
  • 有限布局
    • contain 属性值不为 none
  • 弹性布局
    • display: flex 直接子元素
    • display: inline-flex 直接子元素
  • 网格布局
    • display: gird 直接子元素
    • display: inline-gird 直接子元素
  • 多列布局（分栏布局）
    • column-count 分栏数属性值不为 auto
    • column-width 分栏列宽属性值不为 auto
    • column-span: all 跨越所有列，表现为不分栏
  • 表格布局
    • display: table 表格
    • display: inline-table 内联表格
    • display: table-cell 单元格
    • display: table-caption 表格标题
    • display: table-row 行
    • display: table-row-grouptbody
    • display:table-header-groupthead
    • display:table-footer-grouptfoot

用途 通过创建块级格式上下文，我们可以：

  • 清除浮动
  • 解决外边距折叠
  • 限定布局范围，提高渲染性能

总结

以上列举的方法，无非有两类：

其一，通过在浮动元素的末尾添加一个空元素，设置 clear：both 属性，after 伪元素其实也是通过 content 在元素的后面生成了内容为一个点的块级元素；

其二，通过设置父元素 overflow 或者 display：table 属性来闭合浮动。