CSS フローティング クリーニング。clear:both タグ_Experience 交換は使用しないでください。

例:

一部のコンテンツ

この時点でこのコードをプレビューすると、最も外側の親要素である float コンテナが表示されていないことがわかります。これは、子要素がフローティングされてドキュメント フローから切り離され、親要素の高さがゼロになるためです。
コードを次のように変更すると、

一部のコンテンツ

フローティング コード。これは CSS コーディングの良い実践ですが、このアプローチでは無駄な要素が追加されます。より良い方法は、HTML コードを次のように変更することです:

一部のコンテンツ

「フローティング クリーニング」を制御する CSS クラスを定義します:

コードをコピー コードは次のとおりです。

.clearfix:after {}{
コンテンツ: ".";
クリア: 両方;
高さ: 0;
可視性: hidden;
display: block;
} /* Firefox は要素の生成をサポートしていますが、IE のすべてのバージョンは要素の生成をサポートしていないため、これは Firefox のプロセスです */
.clearfix {}{ display: inline-block;
} /* Mac 上の IE ブラウザの処理 */
/**//* IE-mac からは非表示 \*/
* html .clearfix { }{height: 1%;} /* win上のIEブラウザの処理 */
.clearfix {}{display: block;} ;ブロック要素の変更をリセット*/
/**/ /* End Hide from IE-mac */

この時点で、上記のコードをプレビューします (このメモを削除)。子要素がフローティングであっても、親要素はフロートであることがわかります。コンテナは引き続きそれを囲み、高さの調整を実行します。