方法-フロートをクリアする(Clearfix)
「clearfix」ハックでフロートをクリアする方法を学びます。
フロートをクリアする方法(Clearfix)
フローティング要素の後の要素はその周りを流れます。「clearfix」ハックを使用して問題を修正します。
Clearfixなし
Clearfixを使用
clearfixハック
要素がそれを含む要素よりも背が高く、浮いている場合、その要素はコンテナの外にオーバーフローします。
overflow: auto;
次に、この問題を修正するために、包含要素に追加できます。
例
.clearfix {
overflow: auto;
}
The overflow:auto clearfix works well as long as you are able to keep control of your margins and padding (else you might see scrollbars). The new, modern clearfix hack however, is safer to use, and the following code is used for most webpages:
Example
.clearfix::after {
content: "";
clear: both;
display: table;
}
Tip: Learn more about floats in our CSS Float Tutorial.