2017-03-06 20 views
6

में फ्लोट साफ़ करें मेरे पास यह कोड है और मैं 2 विधियों का उपयोग करके फ्लोट को साफ़ करने की कोशिश कर रहा हूं: overflow और clear, लेकिन यह ऐसा नहीं लगता है।सीएसएस

body { 
 
    border: 1px solid; 
 
    padding: 0 auto; 
 
} 
 

 
header { 
 
    height: 25%; 
 
    border-bottom: 1px solid; 
 
} 
 

 
header #logo { 
 
    float: left; 
 
    text-align: center; 
 
    width: 25%; 
 
} 
 

 
header #titre { 
 
    background: black; 
 
    color: white; 
 
    float: right; 
 
    text-align: center; 
 
    width: 75%; 
 
} 
 

 
#xd {} 
 

 
nav { 
 
    width: 25%; 
 
    text-align: center; 
 
    float: left; 
 
} 
 

 
section { 
 
    border-left: 1px solid; 
 
    width: 75%; 
 
    float: right; 
 
    text-align: center; 
 
} 
 

 
.clr { 
 
    clear: both; 
 
}
<!DOCTYPE html> 
 
<html> 
 

 
<body> 
 
    <header> 
 
    <div id="titre"> 
 
     <h1>sécurité des réseaux</h1> 
 
    </div> 
 
    <div id="logo"> 
 
     <h1>logo</h1> 
 
    </div> 
 
    <br class="clr" /> 
 

 
    </header> 
 
    <div id="xd"> 
 
    <nav> 
 
     <h1><a href="#">#</a></h1> 
 
     <h1><a href="#">#</a></h1> 
 
     <h1><a href="#">#</a></h1> 
 
     <h1><a href="#">#</a></h1> 
 
     <h1><a href="#">#</a></h1> 
 

 
    </nav> 
 
    <section> 
 
     <h1>Firewall (pare-feu)</h1> 
 
     <p> 
 
     Chaque ordinateur connecté à internet (et d'une manière plus générale à n'importe quel réseau informatique) est susceptible d'être victime d'une attaque d'un pirate informatique. La méthodologie généralement employée par le pirate informatique consiste 
 
     à scruter le réseau (en envoyant des paquets de données de manière aléatoire) à la recherche d'une machine connectée, puis à chercher une faille de sécurité afin de l'exploiter et d'accéder aux données s'y trouvant. 
 
     </p> 
 
     <p>Cette menace est d'autant plus grande que la machine est connectée en permanence à internet pour plusieurs raisons : 
 
     </p> 
 
     <ul> 
 
     <li>La machine cible est susceptible d'être connectée sans pour autant être surveillée ;</li> 
 
     <li>La machine cible est généralement connectée avec une plus large bande passante ; 
 
     </li> 
 
     <li>La machine cible ne change pas (ou peu) d'adresse IP. 
 
     </li> 
 

 
     </ul> 
 

 
    </section> 
 
    <br class="clr" /> 
 

 
    </div> 
 

 
</body> 
 

 
</html>

मुझे समझ नहीं आता क्यों पाठ nav में पहला तत्व के साथ लाइन में नहीं कर रहे हैं।

और सीमा भी यह पूर्ण नहीं है। यह क्यों हो रहा है और इसे कैसे ठीक किया जाए?

उत्तर

1

आपकी समस्या आपके पास है 100% + 1px वहाँ हल करने के लिए है कि एक कई विधि है बॉक्स मॉड्यूल

section{box-sizing: border-box;} 

अन्य की चाल की गणना करने के अपने आकार से पहले ही कर दिया है कि यह भी काम बहुत होगा है

3

देखें fiddle

इस टैग के सीएसएस जोड़ें

section{box-sizing: border-box;} 
+0

धन्यवाद आप भाई यह काम करते हैं कि आप यह समझने में मेरी सहायता कर सकते हैं कि यह –

+1

क्यों काम करता है आपकी चौड़ाई 25% + 75% = 100% + सीमा 1 पीएक्स इसलिए एकल लाइन, प्रदर्शित नहीं करती है इसलिए हमने 'बॉक्स-आकार: सीमा-बॉक्स' सीमा के लिए 75% अनुभाग में शामिल हैं और एकल लाइन प्रदर्शित करते हैं। –

4

आप कोड में, आप 25% चौड़ाई बताए जाते हैं NAV के और अनुभाग के लिए 75% चौड़ाई। लेकिन धारा में 1 पीएक्स सीमा है, इसलिए अंत में यह 75% असाइन किया गया है। इसलिए, पूरा खंड नौसेना के नीचे रखा गया है।

आपके कोड में, 1 पीएक्स सीमा को हटाकर या अनुभाग की चौड़ाई बनाने के लिए 74% काम करेगा जैसा कि आप उम्मीद करते हैं, क्योंकि उस अतिरिक्त पिक्सेल के लिए पर्याप्त जगह है।

वैसे, मुझे नहीं लगता कि फ्लोट को साफ़ करना आप जो खोज रहे हैं वह है।

body { 
 
    border: 1px solid; 
 
    padding: 0 auto; 
 
} 
 

 
header { 
 
    height: 25%; 
 
    border-bottom: 1px solid; 
 
} 
 

 
header #logo { 
 
    float: left; 
 
    text-align: center; 
 
    width: 25%; 
 
} 
 

 
header #titre { 
 
    background: black; 
 
    color: white; 
 
    float: right; 
 
    text-align: center; 
 
    width: 75%; 
 
} 
 

 
#xd {} 
 

 
nav { 
 
    width: 25%; 
 
    text-align: center; 
 
    float: left; 
 
} 
 

 
section { 
 
    
 
    width: 75%; 
 
    float: right; 
 
    text-align: center; 
 
} 
 

 
.clr { 
 
    clear: both; 
 
}
<!DOCTYPE html> 
 
<html> 
 

 
<body> 
 
    <header> 
 
    <div id="titre"> 
 
     <h1>sécurité des réseaux</h1> 
 
    </div> 
 
    <div id="logo"> 
 
     <h1>logo</h1> 
 
    </div> 
 
    <br class="clr" /> 
 

 
    </header> 
 
    <div id="xd"> 
 
    <nav> 
 
     <h1><a href="#">#</a></h1> 
 
     <h1><a href="#">#</a></h1> 
 
     <h1><a href="#">#</a></h1> 
 
     <h1><a href="#">#</a></h1> 
 
     <h1><a href="#">#</a></h1> 
 

 
    </nav> 
 
    <section> 
 
     <h1>Firewall (pare-feu)</h1> 
 
     <p> 
 
     Chaque ordinateur connecté à internet (et d'une manière plus générale à n'importe quel réseau informatique) est susceptible d'être victime d'une attaque d'un pirate informatique. La méthodologie généralement employée par le pirate informatique consiste 
 
     à scruter le réseau (en envoyant des paquets de données de manière aléatoire) à la recherche d'une machine connectée, puis à chercher une faille de sécurité afin de l'exploiter et d'accéder aux données s'y trouvant. 
 
     </p> 
 
     <p>Cette menace est d'autant plus grande que la machine est connectée en permanence à internet pour plusieurs raisons : 
 
     </p> 
 
     <ul> 
 
     <li>La machine cible est susceptible d'être connectée sans pour autant être surveillée ;</li> 
 
     <li>La machine cible est généralement connectée avec une plus large bande passante ; 
 
     </li> 
 
     <li>La machine cible ne change pas (ou peu) d'adresse IP. 
 
     </li> 
 

 
     </ul> 
 

 
    </section> 
 
    <br class="clr" /> 
 

 
    </div> 
 

 
</body> 
 

 
</html>

क्या जगदीश परमार propopses भी सही है, के रूप में यह बॉक्स की कुल चौड़ाई अंदर सीमा की चौड़ाई में शामिल हैं:

section{box-sizing: border-box;} 
+0

या धन्यवाद, आप ऊपर भाई बॉक्स आकार का एक चाल देते हैं, यह अद्भुत है –

3

इस प्रयास करें, आप 100 है % + 1 पीएक्स

section { 
    border-left: 1px solid; 
    width: calc(75% - 1px); // Changed this line 
    float: right; 
    text-align: center; 
} 

लाइव जेएसफ़ील्ड - https://jsfiddle.net/grinmax_/4qq133mu/

+0

ओहह वाह धन्यवाद 2 बीआर –

+0

@ خالدالصافي आपका स्वागत है – grinmax

+0

आपका प्रश्न इस प्रश्न का मेरा पसंदीदा जवाब है ... props! – GlennFriesen