CSS clearfixについて

clearfixについての解説

HTML

<!--
    ■■■clearfix (cf:after)の説明■■■
    #containerにclass cfを設定して
    後続の回り込みが解除されるか確かめてください。
    
    1. :afterを指定した要素はその閉じタグの直前（この例では</div>の手前にcontentで指定した内容が挿入される）
    2. content: ''　何も入れない。
    3. display: tableもしくはblockを設定し、
　　　　:after をブロック要素に変換(インライン要素ではfloatを解除できない)した後、
　　　　clear: bothにてleftとrightの回りこみを解除する。
    4. :afterの部分がいつも不可視状態でわかりにくいので、
    　　今回はheight:10px width:20% 背景赤色 を設定し、見た目上わかりやすくした。
    5. displayで、tableもしくはblock要素に変換された :after が
    CSSにより</div>直前に擬似的に挿入され、それにclear:bothを当てることで
　　　　回りこみを解除する役を買ってくれている。
    6. この理解ができたら、cf:after から height,width,background-colorの指定を取る。
-->
<div id="container" class="cf">
    <div id="left">left</div>
    <div id="right">right</div>
</div>
もじもじもじもじもじもじもじもじもじもじもじもじ

CSS

.cf:after {
    content:'';
    clear: both;
    display: table;
    
    /*以下都合上のCSS */
    height: 10px;
    width: 20%;
    background-color: red;
}
#container {
    width: 80%;
    border: 1px solid black;
}
#left {
    float: left;
    width: 40%;
    background-color: green;
}
#right {
    float: right;
    width: 50%;
    background-color: skyblue;
}