フローティング要素をラップします（フロートクリア）

1. 3つのブロック要素を持つボックスの場合、非フローティングの効果はこの
ソースコードです

	<div class="box">
        <div class="content">1</div>
        <div class="content">2</div>
        <div class="content">3</div>
    </div>
    
	<style type="text/css">
        .content {
    
    
            width: 100px;
            height: 100px;
            background-color: black;
            color: #fff;
            float: left;
        }
        
        .box {
    
    
            border: 2px solid red;
        }
        
	</style>

2. 3つのブロック要素に左側のフロートを追加すると、ボックスの高さが折りたたまれます。

解決策
1.大きなボックスに疑似クラスを追加します。
折りたたまれた問題が解決され、幅がボックスがいっぱいです。

        .box::after {
    
    
            clear: both;/*清除浮动*/
            content: "";/*在伪类中必须存在的，不存在content则伪类不生效*/
            display: block;/*clear: both;只对块元素生效，而所有的伪类都是行元素*/
        }

2.ボックスをフローティング要素に変えます（通常、フローティングストリームはナビゲーションバーのテキストのレイアウトに使用され、画像とテキストは囲まれます）。
最後に、折りたたみの問題が解決されます。違いは幅です。ボックスのは適応性があり、いっぱいではありません。
または、ボックスを絶対位置に変えても、効果は同じです。
原則
ボックスを
位置：絶対;
フロート：左/右;
要素を表示：インラインブロック;

フローティング要素として定義します。

	.box {
    
    
            border: 2px solid red;
            float: left;
        }

絶対ポジショニングになる

	.box {
    
    
            border: 2px solid red;
            position: absolute;
        }

3.ただし、内部のブロック要素のみをdisplay：inline-block;として定義すると、効果が異なります。
なぜ異なるのですか？これは、inline-block要素にスペースまたはキャリッジリターンがある限り、そこにあるためです。ギャップになります。

	.content {
    
    
            width: 100px;
            height: 100px;
            background-color: black;
            color: #fff;
            display: inline-block;
        }

ブロック要素のギャップをキャンセルする方法。親要素にfont-size：0pxを追加します
が、その中のコンテンツのフォントサイズは0になるため、中のコンテンツは消えます

	.box {
    
    
            border: 2px solid red;
            font-size: 0px;
        }