追加タグメソッド
Use:after疑似要素
親要素の高さを設定
overflow:hidden属性を使用
親要素は浮動します
親要素は絶対に配置されます
Web ページを開発するときは、さまざまなフロートを使用する必要があることがよくありますが、このとき、フロートを時間内にクリアする必要があります。そうしないと、レイアウトの問題が発生します
質問の先頭:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> .outer{ border: 1px solid black; width:300px; } .inner{ width: 50px; height: 50px; background-color: #ff4400; margin-right: 20px; float: left; } .footer{ background-color: #005FC3; width: 200px; height: 100px; } </style></head><body> <div class="outer"> <div class="inner"></div> <div class="inner"></div> <div class="inner"></div> </div> <div class="footer"></div></body></html>3 をラップする必要があることがわかります。この時点では、内側の DIV の外側の DIV はラップされていません。同時に、フッターの DIV 要素もその下に配置されています。 3 つの浮動要素
解決策:
1. 追加のラベル ヘアを使用する
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> .outer{ border: 1px solid black; width: 300px; } .inner{ width: 50px; height: 50px; background-color: #ff4400; margin-right: 20px; float: left; } .footer{ background-color: #005FC3; width: 200px; height: 100px; } .clearfix{ clear: both; } </style></head><body> <div class="outer"> <div class="inner"></div> <div class="inner"></div> <div class="inner"></div> <div class="clearfix"></div> </div> <div class="footer"></div></body></html>これは初期の頃によく使用される方法ですが、コードにこだわる人にとっては、この解決策は完璧ではありません
2.要素の後に
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> .outer{ border: 1px solid black; width: 300px; } .inner{ width: 50px; height: 50px; background-color: #ff4400; margin-right: 20px; float: left; } .footer{ background-color: #005FC3; width: 200px; height: 100px; } .clearfix:after{ /*最简方式*/ content: ''; display: block; clear: both; } /* 新浪使用方式 .clearfix:after{ content: ''; display: block; clear: both; height: 0; visibility: hidden; } */ .clearfix{ /*兼容 IE*/ zoom: 1; } </style></head><body> <div class="outer clearfix"> <div class="inner"></div> <div class="inner"></div> <div class="inner"></div> </div> <div class="footer"></div></body></html>3. 親要素の高さを設定します
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> .outer{ border: 1px solid black; width: 300px; height: 50px; } .inner{ width: 50px; height: 50px; background-color: #ff4400; margin-right: 20px; float: left; } .footer{ background-color: #005FC3; width: 200px; height: 100px; } </style></head><body> <div class="outer"> <div class="inner"></div> <div class="inner"></div> <div class="inner"></div> </div> <div class="footer"></div></body></html>4. overflow:hidden 属性を使用します
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> .outer{ border: 1px solid black; width: 300px; overflow: hidden; zoom: 1;/*兼容 IE*/ } .inner{ width: 50px; height: 50px; background-color: #ff4400; margin-right: 20px; float: left; } .footer{ background-color: #005FC3; width: 200px; height: 100px; } </style></head><body> <div class="outer"> <div class="inner"></div> <div class="inner"></div> <div class="inner"></div> </div> <div class="footer"></div></body></html>5. 親要素が浮動すると、そこに子要素のフローティングのためにフロートをクリアする必要はありません
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> .outer{ border: 1px solid black; width: 300px; float: left; } .inner{ width: 50px; height: 50px; background-color: #ff4400; margin-right: 20px; float: left; } .footer{ background-color: #005FC3; width: 200px; height: 100px; } </style></head><body> <div class="outer"> <div class="inner"></div> <div class="inner"></div> <div class="inner"></div> </div> <div class="footer"></div></body></html>外側のDIVは崩壊現象を解消しますが、フローティングでもあるため、後続の要素が落ちてしまうことがわかります。通常の文書フローに含まれていない場合は、一番下に表示されます。
それを解決したい場合は、前の方法を参照してください。
例:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> .outer{ border: 1px solid black; width: 300px; float: left; } .inner{ width: 50px; height: 50px; background-color: #ff4400; margin-right: 20px; float: left; } .footer{ background-color: #005FC3; width: 200px; height: 100px; } .clearfix:after{ content: ""; display: block; clear: both; } .clearfix{ zoom: 1; } </style></head><body> <div class="outer"> <div class="inner"></div> <div class="inner"></div> <div class="inner"></div> </div> <div class="clearfix"></div> <div class="footer"></div></body></html>6. 親要素は絶対配置です
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title> <style> .outer{ border: 1px solid black; width: 300px; position: absolute; } .inner{ width: 50px; height: 50px; background-color: #ff4400; margin-right: 20px; float: left; } .footer{ background-color: #005FC3; width: 200px; height: 100px; } </style></head><body> <div class="outer"> <div class="inner"></div> <div class="inner"></div> <div class="inner"></div> </div> <div class="clearfix"></div> <div class="footer"></div></body></html>
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
