SOURCE

<h2>清楚浮动使用</h2>
<h3>不清楚浮动的情况下：</h3>
<div class="wrap-1">
    <div class="wrap-l"></div>
    <div class="wrap-r"></div>
</div>

<h3>使用伪元素清楚浮动的情况下：</h3>
<div class="wrap-2">
    <div class="wrap-l"></div>
    <div class="wrap-r"></div>
</div>
<p>这里清楚浮动我们不用特意添加一个标签，而是使用父元素的 ::after伪元素结合 content:""完美解决</p>


<h2>画不同效果的形状</h2>

<div class="shape-box">
    <div class="triangle triangle-1"></div>
    <div class="triangle triangle-2"></div>
    <div class="triangle triangle-3"></div>
    <div class="triangle triangle-4"></div>
    <div class="triangle triangle-5"></div>
    <div class="triangle triangle-6"></div>
    <div class="triangle triangle-7"></div>
    <div class="triangle triangle-8"></div>
</div>

h2, h3{
    clear:both;
}
h3{
    padding: 20px 0 5px;
}
.wrap-1{
    background-color:rgb(116, 230, 250);
    padding: 10px;
}
.wrap-1 .wrap-l{
    float: left;
    height: 200px;
    width: 20%;
    background-color:rgb(250, 70, 70);
}

.wrap-1 .wrap-r{
    float: right;
    height: 200px;
    width: 60%;
    background-color:rgb(157, 76, 250);
}

.wrap-2{
    background-color:rgb(116, 230, 250);
    padding: 10px;
}
.wrap-2::after{
    content: "";
    clear:both;
    display: table;
}
.wrap-2 .wrap-l{
    float: left;
    height: 200px;
    width: 20%;
    background-color:rgb(250, 70, 70);
}

.wrap-2 .wrap-r{
    float: right;
    height: 200px;
    width: 60%;
    background-color:rgb(157, 76, 250);
}


.triangle{
    width: 50px;
    height: 50px;
    border: 1px solid rgba(248, 168, 168, .2);
    display:  inline-block;
}
.triangle::after{
    content: "";
    position: absolute;
}
.triangle-1::after{
    border-width: 50px 25px 0;
    border-style: solid dashed;
    border-color:#000 transparent;
}
.triangle-2::after{
    border-width: 0 25px 50px;
    border-style: solid dashed;
    border-color:#000 transparent;
}
.triangle-3::after{
    border-width: 25px 50px 25px 0;
    border-style: dashed solid;
    border-color:transparent #000;
}
.triangle-4::after{
    border-width: 25px 0 25px 50px;
    border-style: dashed solid;
    border-color:transparent #000;
}
.triangle-5::after{
    border-width: 50px 0 0 50px;
    border-style: solid dashed;
    border-color:#000 transparent;
}
.triangle-6::after{
    border-width: 50px 50px 0 0;
    border-style: solid dashed;
    border-color:#000 transparent;
}
.triangle-7::after{
    border-width: 0 50px 50px 0;
    border-style: solid dashed;
    border-color: #000 transparent;
}
.triangle-8::after{
    border-width: 0 0 50px 50px;
    border-style: solid dashed;
    border-color: #000 transparent;
}