我有这个代码，我试图使用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中的第一个元素的行。
还有边境不完整。为什么会发生这种情况以及如何解决？
答案 0 :(得分：3)
答案 1 :(得分：3)
在您的代码中，您要为导航分配25％的宽度，为分区分配75％的宽度。但是Section有一个1px的边框，所以最后超过了75％。因此，整个部分都放在导航下。
在相同的代码中，删除1px边框或使截面宽度为74％将按预期工作，因为有足够的空间容纳该额外像素。
顺便说一句，我不认为清理浮动就是你想要的。
<!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>section{box-sizing: border-box;}
Jagdish Parmar提出的建议也是正确的，因为它包括框内总宽度内边框的宽度：
Session答案 2 :(得分：3)
试试这个，你有100％+ 1px
section {
border-left: 1px solid;
width: calc(75% - 1px); // Changed this line
float: right;
text-align: center;
}
Live JsFiddle - https://jsfiddle.net/grinmax_/4qq133mu/
答案 3 :(得分：0)
你的问题是你有100％+ 1px 有几种方法可以解决一个是盒子模块的技巧
section{box-sizing: border-box;}
其他是在放置它之前计算你的尺寸，它也会起作用