/* best practical*/
/* old */
.clearfix:before, .clearfix:after{
    overflow: hidden;
    display: table;
    visibility: hidden;
    content: '';
    clear: both;
}

/* new */
.clearfix::before, .clearfix::after{
    overflow: hidden;
    display: table;
    visibility: hidden;
    content: '';
    clear: both;
}

/* new clearfix */
.clearfix::after {
    content: "";
    display: table;
    clear: both;
    overflow: hidden;
    visibility: hidden;
}

/* old clearfix */
.clearfix:after {
    content: "";
    display: block;
    clear: both;
}

语法

clear: none
clear: left
clear: right
clear: both

clear: inherit

值

none

元素不会向下移动清除之前的浮动。

left

元素被向下移动用于清除之前的左浮动。

right

元素被向下移动用于清除之前的右浮动。

both

元素被向下移动用于清除之前的左右浮动。

inline-start

inline-start是一个关键字，表示该元素向下移动以清除其包含块的起始侧上的浮动。即在某个区域的左侧浮动或右侧浮动。

inline-end

inline-end是一个关键字，表示该元素向下移动以清除其包含块的末端的浮点，`即在某个区域的右侧浮动或左侧浮动。

示例

注意: 给div添加'wrapper'类，使其添加一个边框，以便更好观察到实体的此属性被清除。

HTML Content

<div class="wrapper">

    <p class="black">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
      Phasellus sit amet diam. Duis mattis varius dui. Suspendisse eget dolor.</p>

    <p class="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>

    <p class="left">This paragraph clears left.</p>

</div>

CSS Content

.wrapper{
    border:1px solid black;
    padding:10px;
}
.left {
    border: 1px solid black;
    clear: left;
}
.black {
    float: left;
    margin: 0;
    background-color: black;
    color: #fff;
    width: 20%;
}
.red {
    float: left;
    margin: 0;
    background-color: red;
    width:20%;
}
p {
    width: 50%;
}

如果上例中，样式中的float: left 都改为了float：right的话，则相应clear： right。
而如果左浮动和右浮动都有的样式，则clear: both。（both：两者）

BFC 块格式上下文

块格式化上下文（Block Formatting Context，BFC） 是Web页面的可视化CSS渲染的一部分，是布局过程中生成块级盒子的区域，也是浮动元素与其他元素的交互限定区域。

下列方式会创建块格式化上下文：

• 根元素或包含根元素的元素。

• 浮动元素（元素的 float值不是 none）。

• 绝对定位元素（元素的 position（position属性用于指定一个元素在文档中的定位方式。top，right，bottom 和 left 属性则决定了该元素的最终位置。) 为 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，即使该元素没有包裹在一个多列容器中( 标准变更，Chrome bug）。

创建了块格式化上下文的元素中的所有内容都会被包含到该BFC中。

块格式化上下文对浮动定位与清除浮动都很重要。浮动定位和清除浮动时只会应用于同一个BFC内的元素。浮动不会影响其它BFC中元素的布局，而清除浮动只能清除同一BFC中在它前面的元素的浮动。外边距折叠（Margin collapsing）也只会发生在属于同一BFC的块级元素之间。

以下开始，就不是摘自MDN，而是换成摘自博客园小马哥&的相关博文，再加以整理和添加自己的一点思路而成。

行内元素和块级元素