CSSフローティングをクリアする8つの方法
5725 ワード
フローティングは、現在のラベルを浮上させるとともに、前後のラベル、親ラベルの位置、width heightプロパティに影響します.また、同じコードでも、さまざまなブラウザで表示効果が異なる可能性があり、フローティングのクリアがさらに難しくなります.フローティングによる問題を解決するにはいくつかの方法がありますが、ブラウザの互換性に問題がある方法もあります.
1.親div定義height
原理:親divがheightを手動で定義すると、親divが自動的に高さを取得できないという問題が解決します.
利点:簡単、コードが少なく、把握しやすい
欠点:高さが固定されたレイアウトにのみ適しており、正確な高さを与えるには、高さが親divと異なる場合に問題が発生します.
推奨:使用は推奨されず、高度に固定されたレイアウトのみが推奨されます.
2.末尾にdivタグclear:bothを空にする
原理:IE 8以上と非IEブラウザのみサポート:after、原理と方法2は少し似ていて、zoom(IE回転属性)はie 6、ie 7フローティングの問題を解決することができます
利点:ブラウザのサポートがよくて、変な問題が発生しにくい(現在:大規模なウェブサイトはすべて使用して、例えば:騰迅、網易、新浪など)
欠点:コードが多く、多くの初心者は原理を理解していないので、2つのコードを組み合わせて使用してこそ、主流のブラウザをサポートすることができます.
推奨:使用を推奨し、CSSコードを削減するために共通クラスを定義することを推奨します.
4.親div定義overflow:hidden
原理:widthまたはzoom:1を定義する必要があります.heightを定義することはできません.overflow:hiddenを使用すると、ブラウザはフローティング領域の高さを自動的にチェックします.
利点:簡単、コードが少なく、ブラウザのサポートが良い
欠点:positionと組み合わせて使用することはできません.サイズを超えると隠されるからです.
アドバイス:positionを使用していない人やoverflow:hiddenを理解している人だけがお勧めします.
5.親div定義overflow:auto
原理:widthまたはzoom:1を定義する必要があります.heightは定義できません.overflow:autoを使用すると、ブラウザは自動的にフローティング領域の高さをチェックします.
利点:簡単、コードが少なく、ブラウザのサポートが良い
欠点:内部幅が親divを超えると、スクロールバーが表示されます.
推奨:使用を推奨しません.スクロールバーが表示される必要がある場合や、コードがスクロールバーに表示されないことを確認して使用してください.
6.親divも一緒にフローティング
原理:すべてのコードが一緒に浮動すると、全体になります.
長所:長所がない
欠点:新しいフローティング問題が発生します.
推奨:使用を推奨せず、理解するだけです.
7.親div定義display:table
原理:divプロパティを表にする
長所:長所がない
欠点:新しい未知の問題が発生します.
推奨:使用を推奨せず、理解するだけです.
8.末尾にbrタグclear:bothを付ける
原理:親div定義zoom:1 IEフローティング問題を解決し、最後にbrタグclear:bothを付ける
推奨:使用を推奨せず、理解するだけです.
1.親div定義height
Left
Right
div2
原理:親divがheightを手動で定義すると、親divが自動的に高さを取得できないという問題が解決します.
利点:簡単、コードが少なく、把握しやすい
欠点:高さが固定されたレイアウトにのみ適しており、正確な高さを与えるには、高さが親divと異なる場合に問題が発生します.
推奨:使用は推奨されず、高度に固定されたレイアウトのみが推奨されます.
2.末尾にdivタグclear:bothを空にする
原理：添加一个空div，利用css提高的clear:both清除浮动，让父级div能自动获取到高度
优点：简单、代码少、浏览器支持好、不容易出现怪问题
缺点：不少初学者不理解原理；如果页面浮动布局多，就要增加很多空div，让人感觉很不好
建议：不推荐使用，但此方法是以前主要使用的一种清除浮动方法
3.父级div定义 伪类:after 和 zoom
Left
Right
div2
原理:IE 8以上と非IEブラウザのみサポート:after、原理と方法2は少し似ていて、zoom(IE回転属性)はie 6、ie 7フローティングの問題を解決することができます
利点:ブラウザのサポートがよくて、変な問題が発生しにくい(現在:大規模なウェブサイトはすべて使用して、例えば:騰迅、網易、新浪など)
欠点:コードが多く、多くの初心者は原理を理解していないので、2つのコードを組み合わせて使用してこそ、主流のブラウザをサポートすることができます.
推奨:使用を推奨し、CSSコードを削減するために共通クラスを定義することを推奨します.
4.親div定義overflow:hidden
Left
Right
div2
原理:widthまたはzoom:1を定義する必要があります.heightを定義することはできません.overflow:hiddenを使用すると、ブラウザはフローティング領域の高さを自動的にチェックします.
利点:簡単、コードが少なく、ブラウザのサポートが良い
欠点:positionと組み合わせて使用することはできません.サイズを超えると隠されるからです.
アドバイス:positionを使用していない人やoverflow:hiddenを理解している人だけがお勧めします.
5.親div定義overflow:auto
Left
Right
div2
原理:widthまたはzoom:1を定義する必要があります.heightは定義できません.overflow:autoを使用すると、ブラウザは自動的にフローティング領域の高さをチェックします.
利点:簡単、コードが少なく、ブラウザのサポートが良い
欠点:内部幅が親divを超えると、スクロールバーが表示されます.
推奨:使用を推奨しません.スクロールバーが表示される必要がある場合や、コードがスクロールバーに表示されないことを確認して使用してください.
6.親divも一緒にフローティング
Left
Right
div2
原理:すべてのコードが一緒に浮動すると、全体になります.
長所:長所がない
欠点:新しいフローティング問題が発生します.
推奨:使用を推奨せず、理解するだけです.
7.親div定義display:table
Left
Right
div2
原理:divプロパティを表にする
長所:長所がない
欠点:新しい未知の問題が発生します.
推奨:使用を推奨せず、理解するだけです.
8.末尾にbrタグclear:bothを付ける
Left
Right
div2
原理:親div定義zoom:1 IEフローティング問題を解決し、最後にbrタグclear:bothを付ける
推奨:使用を推奨せず、理解するだけです.