නිපදවන සැලසුම මත පදනම්ව, පහත දැක්වෙන එක් එක් පැහැදිලි විසඳුම් CSS විසඳුම් වලට තමන්ගේම වාසි ඇත.
Clearfix හි ප්‍රයෝජනවත් යෙදුම් ඇති නමුත් එය අනවසරයෙන් භාවිතා කර ඇත. ඔබ පැහැදිලි විසඳුමක් භාවිතා කිරීමට පෙර මෙම නවීන CSS විසඳුම් ප්‍රයෝජනවත් විය හැකිය:
නවීන ක්ලියර්ෆික්ස් විසඳුම්
සමඟ බහාලුම් overflow: auto;
පාවෙන මූලද්රව්ය ඉවත් කිරීමට සරලම ක්රමය වන්නේ overflow: autoඅඩංගු මූලද්රව්යයේ ශෛලිය භාවිතා කිරීමයි . මෙම විසඳුම සෑම නවීන බ්‍රව්සරයකම ක්‍රියාත්මක වේ.
<div style="overflow: auto;">
<img
style="float: right;"
src="path/to/floated-element.png"
width="500"
height="500"
>
<p>Your content here…</p>
</div>
එක් අවාසියක් නම්, බාහිර මූලද්රව්යය මත යම් ආන්තික හා පෑඩින් සංයෝජන භාවිතා කිරීමෙන් අනුචලන තීරු පෙනෙන්නට පුළුවන, නමුත් ආන්තිකය සහ පෑඩින් වෙනත් මවුපියන් අඩංගු මූලද්‍රව්‍යයක් මත තැබීමෙන් මෙය විසඳිය හැකිය.
'පිටාර ගැලීම: සැඟවුණු' භාවිතා කිරීම ද පැහැදිලි විසඳුමක් වන නමුත් අනුචලන තීරු නොතිබෙනු ඇත, කෙසේ වෙතත් භාවිතා කිරීමෙන් hiddenඅඩංගු මූලද්‍රව්‍යයෙන් පිටත ස්ථානගත කර ඇති ඕනෑම අන්තර්ගතයක් කපනු ලැබේ .
සටහන: පාවෙන මූලද්රව්යය imgමෙම උදාහරණයේ ටැගයකි, නමුත් ඕනෑම html මූලද්‍රව්‍යයක් විය හැකිය.
Clearfix Reloaded
CSSMojo හි තියරි කොබ්ලෙන්ට්ස් මෙසේ ලිවීය: නවතම පැහැදිලි කිරීම නැවත පූරණය විය . පැරණි අයිඊ සඳහා සහය දැක්වීමෙන් විසඳුම එක් සීඑස්එස් ප්‍රකාශයකට සරල කළ හැකි බව ඔහු සඳහන් කළේය. මීට අමතරව, පැහැදිලි display: blockවෙනුවට ඇති display: tableමූලද්රව්ය සහෝදර සහෝදරියන් වන විට (වෙනුවට ) භාවිතා කිරීම ආන්තිකයන් නිසි ලෙස බිඳ වැටීමට ඉඩ දෙයි.
.container::after {
content: "";
display: block;
clear: both;
}
ක්ලියර්ෆික්ස් හි වඩාත්ම නවීන අනුවාදය මෙයයි.
⋮
⋮
පැරණි ක්ලියර්ෆික්ස් විසඳුම්
නවීන බ්‍රව්සර් සඳහා පහත විසඳුම් අවශ්‍ය නොවන නමුත් පැරණි බ්‍රව්සර් ඉලක්ක කිරීම සඳහා ප්‍රයෝජනවත් විය හැකිය.
මෙම විසඳුම් බ්‍රව්සර් දෝෂ මත රඳා පවතින අතර එබැවින් භාවිතා කළ යුත්තේ ඉහත විසඳුම් කිසිවක් ඔබ වෙනුවෙන් ක්‍රියා නොකරන්නේ නම් පමණි.
ඒවා දළ වශයෙන් කාලානුක්‍රමික පිළිවෙලට ලැයිස්තුගත කර ඇත.
නවීන බ්‍රව්සර් සඳහා පැහැදිලි විසඳුමක් වන “බීට් ද ක්ලියර්ෆික්ස්”
ක තියරි Koblentz ' CSS Mojo නවීන බ්රවුසරයන් ඉලක්ක විට, අප දැන් අතහැර හැකි බව පෙන්වා දී ඇත zoomහා ::beforeදේපල / වටිනාකම් හා සරලව භාවිතා කරන්න:
.container::after {
content: "";
display: table;
clear: both;
}
මෙම විසඳුම IE 6/7 සඳහා සහය නොදක්වයි… අරමුණක් ඇතුව!
තියරි ද මෙසේ කියයි: " පරෙස්සම් සහගත වචනයක් : ඔබ මුල සිටම නව ව්‍යාපෘතියක් ආරම්භ කරන්නේ නම්, ඒ සඳහා යන්න, නමුත් දැන් ඔබ සතුව ඇති තාක්‍ෂණය සමඟ මෙම තාක්‍ෂණය මාරු නොකරන්න, මන්ද ඔබ පැරණි අයිඊයට සහාය නොදක්වුවද, ඔබගේ පවතින නීති වලක්වනු ඇත බිඳ වැටෙන ආන්තිකයන්. ”
මයික්‍රෝ ක්ලියර්ෆික්ස්
නිකොලස් ගැලගර් විසින් රචිත මයික්‍රෝ ක්ලියර්ෆික්ස් හි නවතම හා ගෝලීය වශයෙන් පිළිගත් ක්ලියර්ෆික්ස් විසඳුම .
දන්නා සහාය: ෆයර්ෆොක්ස් 3.5+, සෆාරි 4+, ක්‍රෝම්, ඔපෙරා 9+, අයිඊ 6+
.container::before, .container::after {
content: "";
display: table;
}
.container::after {
clear: both;
}
.container {
zoom: 1;
}
පිටාර ගැලීමේ දේපල
ස්ථානගත කර ඇති අන්තර්ගතය බහාලුම් සීමාවෙන් පිටත නොපෙන්වන විට සුපුරුදු අවස්ථාව සඳහා මෙම මූලික ක්රමය වඩාත් සුදුසු වේ.
http://www.quirksmode.org/css/clearing.html
- මෙම තාක්ෂණයට අදාළ පොදු ගැටළු නිරාකරණය කරන්නේ කෙසේද යන්න පැහැදිලි කරයි, එනම් width: 100%කන්ටේනරය සැකසීම .
.container {
overflow: hidden;
display: inline-block;
display: block;
}
displayIE සඳහා "hasLayout" සැකසීමට දේපල භාවිතා කරනවා වෙනුවට , මූලද්‍රව්‍යයක් සඳහා "hasLayout" අවුලුවාලීමට වෙනත් ගුණාංග භාවිතා කළ හැකිය .
.container {
overflow: hidden;
zoom: 1;
display: block;
}
overflowදේපල භාවිතා කරමින් පාවෙන දේ ඉවත් කිරීමට තවත් ක්‍රමයක් වන්නේ අවධාරනය කරන ලද හැක් භාවිතා කිරීමයි . IE විසින් යටි ඉරි සහිත උපසර්ගයන් යොදනු ඇත, අනෙක් බ්‍රව්සර් එසේ නොවේ. මෙම zoomදේපල මූලික හේතුව hasLayout IE දී:
.container {
overflow: hidden;
_overflow: visible; /* for IE */
_zoom: 1; /* for IE */
}
මෙය ක්‍රියාත්මක වන අතර ... හක්ක භාවිතා කිරීම සුදුසු නොවේ.
PIE: පහසු නිශ්කාෂණ ක්රමය
මෙම පැරණි "ඊසි ක්ලියරින්" ක්‍රමයට වඩා උපායශීලී CSS හි වියදමින් ස්ථානගත කර ඇති මූලද්රව්ය බහාලුම් සීමාවෙන් පිටත එල්ලීමට ඉඩ දීමේ වාසිය ඇත.
මෙම විසඳුම තරමක් පැරණි ය, නමුත් සෑම දෙයක්ම පහසුවෙන් ඉවත් කිරීම පිළිබඳ සියල්ල ඉගෙන ගත හැකිය: http://www.positioniseverything.net/easyclearing.html
"පැහැදිලි" දේපල භාවිතා කරන මූලද්රව්යය
ඔබ ඉක්මණින් යමක් කම්මුලට ගසන විට ඉක්මන් හා අපිරිසිදු විසඳුම (සමහර අඩුපාඩු සහිතව):
<br style="clear: both" /> <!-- So dirty! -->
අඩුපාඩු
- එය ප්‍රතිචාර නොදක්වන අතර මාධ්‍ය විමසුම් මත පදනම්ව පිරිසැලසුම් මෝස්තර වෙනස් වුවහොත් අපේක්ෂිත ප්රති provide ල ලබා නොදේ. පිරිසිදු CSS හි විසඳුමක් වඩාත් සුදුසු ය.
- එය කිසිදු අර්ථකථන අගයක් එකතු නොකර html සලකුණු එකතු කරයි.
- සීඑස්එස් හි “ක්ලියර්ෆික්ස්” හි තනි විසඳුමක් සඳහා පන්ති යොමු කිරීමකට වඩා එක් එක් අවස්ථාව සඳහා පේළිගත අර්ථ දැක්වීමක් සහ විසඳුමක් අවශ්‍ය වේ.
- එය අනෙක් අයට වැඩ කිරීමට කේතය දුෂ්කර කරයි, මන්ද එය වටා වැඩ කිරීමට තවත් හක්ක ලිවීමට සිදුවනු ඇත.
- අනාගතයේදී ඔබට වෙනත් පැහැදිලි විසඳුමක් භාවිතා කිරීමට අවශ්‍ය වූ විට / අවශ්‍ය වූ විට, ඔබට ආපසු ගොස්
<br style="clear: both" />සලකුණු කිරීම වටා ඇති සෑම ටැගයක්ම ඉවත් කිරීමට සිදු නොවේ .
