HTML5/CSS3 画像にfloatを適用する / floatを解除する の書き方

マージンのたたみ込みと、不要なマージンを削除する方法。floatを適用したあとには、必ず解除する言語を記載しなければいけません。

concept_section_float.html

...
<div id="main">
<article>
<h1>...</h1>
<section class="concept_box">
<h2>...</h2>
<p><img src="images/concept_photo1.jpg" alt="" class="image_right"></p>
<p>...</p>
<p>...</p>
</section>
<section class="concept_box">
<h2>...</h2>
<p><img src="images/concept_photo2.jpg" alt="" class="image_left"></p>
<p>...</p>
<p>...</p>
</section>
</article>
</div>
...

consept_section_float.css

/* img_float ページここから ↓ */
    /* floatを解除する② ↓ */
.concept_box {
overflow: hidden;
margin-bottom: 30px;
}                                   
    /* 画像にfloatを適用する 最初にここの部分から書き始める① ↓ */
.image_right {
float: right;
margin-left: 25px;
}
.image_left {
float: left;
margin-right: 25px;
}
    /* 不要なマージンを0にする③ ↓ */
.concept_box:last-child,
.concept_box p:last-child {
margin-bottom: 0;
}
/* img_float ページここまで ↑ */