clearfix:afterでcssフローティングを除去する
HTMLコードを書く際には、FirefoxなどW 3 C規格に準拠したブラウザでDIVが外部コンテナとしてある場合、内部のDIVにfloatスタイルが設定されていると、外部のコンテナDIVは内部にclearがないため、開けられないようになります.次の例を見てください.
このコードを実行すると、外部容器としての枠が赤いDIVで、支えられていないことがわかります.これは内部のDIVがfloat:left以降、clear:bothとdisplay:blockのスタイルを失っているため、外部のDIVが開かれないためです.外部容器のDIVを内部DIVの増加に伴って高さを増加させたいのですが、どうすればいいのでしょうか.以前は
コンテナDIVに表示されるfloat:leftのすべてのDIVの後に、このようなDIV:が追加されていることがわかります.これで、実は最後にclearの動作を増やしました.しかし、私はいつも、このようにDIVを1つ追加するのは少し妥当ではないと感じています.1つは意味のないDIVが1つ増えたこと、2つはdojoでDrag&Dropを作ったとき、このDIVはコンテナDIVの1つのワードノードなので、このノードが移動されると、レイアウト上のBug:表示する青い枠のDIVがこのDIVに移動された後、clear:bothのため、強制的に1行の表示に変更されます.だから、私はずっともっと良い解決策を探しています.解決策:まずこのようなCSS:CSSコードを設定する:
コード:
TEST DIV
CSSBBS
TEST DIV
TEST DIV
TEST DIV
このコードを実行すると、外部容器としての枠が赤いDIVで、支えられていないことがわかります.これは内部のDIVがfloat:left以降、clear:bothとdisplay:blockのスタイルを失っているため、外部のDIVが開かれないためです.外部容器のDIVを内部DIVの増加に伴って高さを増加させたいのですが、どうすればいいのでしょうか.以前は
TEST DIV
TEST DIV
TEST DIV
TEST DIV
TEST DIV
コンテナDIVに表示されるfloat:leftのすべてのDIVの後に、このようなDIV:が追加されていることがわかります.これで、実は最後にclearの動作を増やしました.しかし、私はいつも、このようにDIVを1つ追加するのは少し妥当ではないと感じています.1つは意味のないDIVが1つ増えたこと、2つはdojoでDrag&Dropを作ったとき、このDIVはコンテナDIVの1つのワードノードなので、このノードが移動されると、レイアウト上のBug:表示する青い枠のDIVがこのDIVに移動された後、clear:bothのため、強制的に1行の表示に変更されます.だから、私はずっともっと良い解決策を探しています.解決策:まずこのようなCSS:CSSコードを設定する:
コード:
.clearfix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
， HTML ， DIV CSS：
HTML4STRICT ：