All geek questions in one place

Clear float in CSS

I have this code, and I'm trying to clear the float using 2 methods: overflowand clear, but it does not work as intended.

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>
Run codeHide result

I do not understand why the text is not in the line with the first element in nav.

And also the border is not completed. Why is this happening and how to fix it?

+4
source share
4 answers

Your problem is that you have 100% + 1px there are several ways to solve this problem - the box module trick

section{box-sizing: border-box;}

the other must calculate your size before putting it, which will also work very well.

0
source

See fiddle

Add CSS to this tag

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

25% 75% . 1px, 75%. , .

In your code, deleting a 1px border or creating a 74% section width will work as you expect, because there is enough space for this extra pixel.

By the way, I don’t think that clearing the float is what you are looking for.

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>
Run codeHide result

That Jagdish Parmar propopses is also true, since it includes the width of the frame inside the overall width of the window:

section{box-sizing: border-box;}
+3
source

Try this, you have 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
source

Source: https://habr.com/ru/post/1671588/

More articles:


All Articles