overflow:hidden の役割の詳細な説明 (オーバーフローの非表示、フロートのクリア、マージンの崩壊の解決)

/*css スタイル*/
<スタイル タイプ="text/css">
    div{ 幅: 150px; 高さ: 60px; 背景: スカイブルー;
	 overflow: hidden; /*オーバーフローは非表示*/
       }
</スタイル>
 
/*html*/
<div スタイル="">
    今日はとても良い天気ですね！ <br>今日はとても良い天気ですね！ <br>
    今日はとても良い天気ですね！ <br>今日はとても良い天気ですね！ <br>
</div>

/* 1行テキストのみ */
div{ 
    幅: 150ピクセル;
    背景: スカイブルー;
    overflow: hidden; /*オーバーフローは非表示*/
    white-space: nowrap; /*テキストが折り返されないことを指定します*/
    text-overflow: ellipsis; /*テキストがオブジェクト内でオーバーフローすると、省略記号 (...) が表示されます*/
}

/*css スタイル*/
<スタイル タイプ="text/css">
    .box{ 背景: スカイブルー; }
    .kid{ 幅: 100px; 高さ: 100px; フロート: 左;}
    .kid1{ 背景: 黄色; }
    .kid2{ 背景: オレンジ; }
    .wrap{ 幅: 300px; 高さ: 150px; 背景: 青; 色: 白; }
</スタイル>
 
/*html*/
<本文>
    <div class="box">
        <div class="kid kid1">子要素 1</div>
	<div class="kid kid2">子要素 2</div>
    </div>
    <div class="wrap">その他の部分</div>
</本文> 

/*css スタイル*/
<スタイル タイプ="text/css">
    .box{ 背景:スカイブルー; 
	  overflow: hidden; /*フローティングをクリア*/
	  ズーム：1;
        }
    .kid{ 幅: 100px; 高さ: 100px; フロート: 左;}
    .kid1{ 背景: 黄色; }
    .kid2{ 背景: オレンジ; }
    .wrap{ 幅: 300px; 高さ: 150px; 背景: 青; 色: 白; }
</スタイル>
 
/*html*/
<本文>
    <div class="box">
        <div class="kid kid1">子要素 1</div>
	<div class="kid kid2">子要素 2</div>
    </div>
    <div class="wrap">その他の部分</div>
</本文> 

/*css スタイル*/
<スタイル タイプ="text/css">
    .box{ 背景: 空色;}
    .kid{ 幅: 100px; 高さ: 100px; 背景: 黄色; 上余白: 20px}
</スタイル>
 
/*html*/
<本文>
    <div class="box">
	<div class="kid">子要素 1</div>
    </div>
</本文> 

/*css スタイル*/
<スタイル タイプ="text/css">
    .box{ 背景:スカイブルー;
          overflow: hidden; /*マージンの崩壊を解決する*/   
        }
    .kid{ 幅: 100px; 高さ: 100px; 背景: 黄色; 上余白: 20px}
</スタイル>
 
/*html*/
<本文>
    <div class="box">
	<div class="kid">子要素 1</div>
    </div>
</本文>