ホームページ >ウェブフロントエンド >htmlチュートリアル >フロートをクリアするにはどうすればよいですか? htmlの場合:疑似要素以降の浮動要素をクリアするメソッドの実装(コード)
この記事の内容は、フローティングをクリアする方法についてです? HTMLの:after疑似要素の浮動要素をクリアする方法の実装(コード)は、参考になれば幸いです。
:after 擬似要素と :before 擬似要素は、それぞれ要素の前後にコンテンツを追加するために使用されます。実際の Web 開発プロセスでは、:after 擬似要素がより一般的に使用されます。 -element は通常、float をクリアするために使用されます。float をクリアするために疑似要素を使用することは、通常の float クリアの 3 つの方法の 1 つであり、最も一般的に使用され、推奨される方法でもあります。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>:after清除浮动</title> <style> .out { width:200px; border: 5px solid red; } .out:after{ content: ''; display: block; width: 0px; height: 0px; clear: left; } .in { width: 100px; height: 100px; float:left; } </style> </head> <body> <div class="out"> <div class="in" style="background-color: blue;"></div> <div class="in" style="background-color: green;"></div> </div> </body> </html>
効果は写真の通りです:
関連する推奨事項:
float のクリア 1-使用: 疑似要素_html/css_WEB-ITnose の後
html float をクリアする 6 つの方法 example_CSS/ HTML
以上がフロートをクリアするにはどうすればよいですか? htmlの場合:疑似要素以降の浮動要素をクリアするメソッドの実装(コード)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。