SOURCE

<div class="title">-- 代码 0 --</div>
<div class="contain contain-0">
	<div class="left left-0">left</div>
	<div class="content-0">content content content content</div>
</div>


<div class="title">-- 代码 1 --</div>
<div class="contain">
	<div class="left left-1">left</div>
	<div class="right right-1">right</div>
</div>

<div class="title">-- 代码 2 --</div>
<div class="contain">
	<div class="left left-2">left</div>
	<div class="right right-2">right</div>
</div>

<div class="title">-- 代码 3 --</div>
<div class="contain">
	<div class="left left-3 ">left</div>
	<div class="center-div-3"></div>
	<div class="right right-3 ">right</div>
</div>


<div class="title">-- 代码 4 --</div>
<div class="contain">
	<div class="left left-4">left</div>
	<div class="right right-4">right</div>
	<div class="bottom-div-4"></div>
</div>

<div class="title">-- 代码 5--</div>
<div class="contain contain-5">
	<div class="left left-5">left</div>
	<div class="right right-5">right</div>
</div>

<div class="title">-- 代码 6--</div>
<div class="contain contain-6">
	<div class="left left-6">left</div>
	<div class="right right-6">right</div>
</div>

<div class="title">-- 代码 7 --</div>
<div class="contain contain-7">
	<div class="left left-7">left</div>
	<div class="right right-7">right</div>

</div>

<div class="title">-- 代码 8 --</div>
<div class="contain contain-8">
	<div>当前这里是一个块 所以下面的元素会浮动到它的下面</div>
	<hr/>
		<div>left 与 right 没有超过 整体 那么就不会换行</div>
		<div class="left left-8">left</div>
		<div class="right right-8">right</div>
		<div>
			right right right right right right right right right right right right right right right right right right right right right
			right right right right right right right right right right right right right right right right right right right right
			right right right right right right right right right right right right right right right right right right right right
			right right right right right right right right right right right right right right right right right right right right
			right right right right right right right right right
		</div>
</div>

<div class="title">-- 代码 9 --</div>
<div class="contain contain-9">
	<div class="block-1 block-9-1">block-1</div>
	<div class="block-9-2">
		<div class="block-2 block-9-2-inner">block-2</div>
	</div>
</div>


<div class="title">-- 代码 10 --</div>
<div class="contain contain-10">
	<div class="block-1 block-10-1">block-1</div>
	<div class="block-2 block-10-2">block-2</div>
	</div>
</div>

/* 公共样式 */

.contain,
.left,
.right,
.block-1,
.block-2 {
    border: 1px solid #ccc;
}

.left,
.right,
.block-1,
.block-2 {
    width: 50px;
    height: 50px;
    border-color: green;
}

.right,
.block-2 {
    border-color: red;
}

.title {
    font-size: 20px;
    margin: 20px 0;
}

.contain-0 {}

.left-0 {
    float: left;
}

.content-0 {}


/**
    1. clear 的取值效果
    left： 左侧不允许有浮动元素
    right: 右侧不允许有浮动元素
    both: 两侧不允许有浮动元素
    none: 允许两侧有浮动元素
    inherit: 继承父元素
*/


/**
    代码 1.1 
    .left { float: left; } 浮动形成BFC  并且脱离文档流 
    .right { clear: left; } 清除左侧浮动 将 div.right 顶到父盒子最底下 
                            当前节点没有脱离文档流
                            所以 它会将父盒子高度顶开
*/

.left-1 {
    float: left;
}

.right-1 {
    clear: left;
}


/**
    代码 1.2
    .left {clear: right;} 他没有浮动 会将父节点顶开高度 这里 clear 没啥屌用
    .right { float: right; } 由于 浮动形成BFC 所以它另起一行
*/

.left-2 {
    clear: right;
}

.right-2 {
    float: right;
}


/**
    代码 1.3  
    .center-div { clear: left; } 与  代码 1.1 一致的表现 因为 左侧不能有浮动 自己跑到了 left 底下 所以顶开父盒子
    .center-div { clear: right; } 与 没清除一致表现      因为 左侧还是浮动了 没有节点顶开
    .center-div { clear: both; } 与  代码 1.1 一致的表现 因为 左侧不能有浮动 自己跑到了 left 底下 所以顶开父盒子
*/

.left-3 {
    float: left;
}

.right-3 {
    float: right;
}

.center-div-3 {
    /* clear: left; */
    /* clear: right; */
    clear: both;
}


/**
    代码 1.4
    .bottom-div { clear: left; } 与  正常清除浮动的表现 因为 左侧不能有浮动 自己跑到了最底下 所以顶开父盒子
    .bottom-div { clear: right; } 与 正常清除浮动的表现 因为 这个确实不知道咋说 但是就是能够正常清除
    .bottom-div { clear: both; } 与  正常清除浮动的表现 因为 左侧不能有浮动 自己跑到了最底下 所以顶开父盒子
*/

.left-4 {
    float: left;
}

.right-4 {
    float: right;
}

.bottom-div-4 {
    /* clear: left; */
    /* clear: right; */
    clear: both;
}


/*
    代码 1.5 
    5.1 clear 与代码 1.4 一致
    5.2 :after display: inline; 无法撑开父元素 所以必须使用 块元素
    5.3 :before 在父元素前面 也在所有的 子节点前面 所以无法放置到后面形成 撑开父节点的作用
 */

.left-5 {
    float: left;
}

.right-5 {
    float: right;
}

.contain-5::after {
    /*.contain::before{ */
    clear: both;
    display: block;
    content: "";
}


/*
    代码 1.6
    可以形成 BFC 清除浮动 但是 更改了页面效果
*/

.left-6 {
    float: left;
}

.right-6 {
    float: right;
}

.contain-6 {
    display: flex;
}


/*
    代码 1.7
    可以形成 BFC 清除浮动 但是 元素超出就形成其他效果了
*/

.left-7 {
    float: left;
}

.right-7 {
    float: right;
}

.contain-7 {
    overflow: hidden;
}


/*
    代码 1.8 图文环绕
*/

.left-8 {
    float: left;
}

.right-8 {
    float: right;
}

.contain-8::after {
    clear: both;
    display: block;
    content: "";
}


/*
    代码 1.9 margin-top 塌陷
*/

.contain-9:after {
    content: "";
    display: block;
    clear: both;
}

.block-9-1 {
    margin-bottom: 20px;
}

.block-9-2 {
    /* float: left; */
    overflow: hidden;
    /* display: flex; */
    /* position: absolute; */
}

.block-9-2-inner {
    margin-top: 20px;
}


/*
    代码 1.10 margin-top 塌陷
*/

.contain-10 {
    overflow: hidden;
}

.block-10-1 {
    margin-bottom: 20px;
}

.block-10-2 {
    overflow: hidden;
    margin-top: 20px;
}