Css: Problems with floats

Question

I was reading and watching a lot of video about Floats.. but I don't get it yet... I have nav with floats after it I have a normal div, I put "clear:both", but I can't put it "margin" to my div, but I can put it "padding", that's works more or less like I want.. but I'd like to learn why it is happening... THANKS YOU GUYS!

*{margin:0;padding:0;box-sizing:border-box;}
body {
 background-image: url(../fondo.jpg);
 background-position: center;
 background-size: cover;
 background-repeat: no-repeat;
}
nav {
 background-color: rgba(0,0,0,.5);
 color: #fff;
 width: 1000px;
 margin: 0 auto;
}
ul {
 display: block;
 list-style-type: none;
 text-align: center;
}
.ul-main > li {
 width: 33.3%;
 float: left;
}
.ul-main li a {
 background-color: #000;
 display: block;
 color: #fff;
 text-decoration: none;
 padding: 10px 0;
 transition: background-color .5s;
}
.ul-main li a:hover {
 background-color: #FBC02D;
}
.ul-main li ul {
 display: none;
 position: absolute;
 width: 20%;
}
.ul-main li:hover > ul {
 display: block;
}
.ul-main li ul li {
 position: relative;
}
.ul-main li ul li a {
 background-color: #FBC02D;
}
.ul-main li ul li a:hover {
 background-color: #FFEB3B;
}
.ul-main li ul li ul{
 right: -70%;
 top:0;
 width: 70%;
}
.clear {
 clear: both;
}
.wrapper {
 width: 500px;
 margin-top: 1000px;
}

<!DOCTYPE>
<html>
 <head>
  <meta charset="utf-8"/>
  <title>Ejercicio de Maquetación</title>
  <meta http-equiv="refresh" content="60"/>
  <link rel="stylesheet" href="css/contacto.css"/>
  <link rel="stylesheet" href="css/header.css"/>
 </head>
 <body>
 <header>
  <nav>
   <ul class="ul-main">
    <li><a href="index.html" >Inicio</a></li>
    <li class="somos"><a href="#" >Quienes somos</a>
     <ul>
      <li><a href="#" >Historia</a></li>
      <li id="azul"><a href="#" >Proyectos</a>
       <ul>
        <li><a href="#" >Huerta para estudiantes</a></li>
        <li><a href="#" >Comedor</a></li>
       </ul>
      </li>
     </ul>
    </li>
    <li><a href="contacto.html" >Contacto</a></li>
   </ul>
  </nav>
 </header>
 <section class="wrapper clear">
  <h2>Infórmate!</h2>
 
 </section>
 </body>
</html>

check this link out .. it describes in details how the float works https://css-tricks.com/all-about-floats/ .. hope this helps — animake, Feb 20 '18 at 17:32
Think of floated elements like they were images in an encyclopedia or other book. This is what they're for. Makes sense right? You're struggling to understand them because people use them incorrectly to align layout, and they are just not designed for this purpose. By default the float will align your image to the left or right of the page and make the text flow around it. And yes! You can add margins in this scenario :) — Matt from vision.app, Feb 20 '18 at 17:47

score 0 · Answer 1 · answered Feb 20 '18 at 18:04

you could add a div between them and it will work

*{margin:0;padding:0;box-sizing:border-box;}
body {
 background-image: url(../fondo.jpg);
 background-position: center;
 background-size: cover;
 background-repeat: no-repeat;
}
nav {
 background-color: rgba(0,0,0,.5);
 color: #fff;
 width: 1000px;
 margin: 0 auto;
}
ul {
 display: block;
 list-style-type: none;
 text-align: center;
}
.ul-main > li {
 width: 33.3%;
 float: left;
}
.ul-main li a {
 background-color: #000;
 display: block;
 color: #fff;
 text-decoration: none;
 padding: 10px 0;
 transition: background-color .5s;
}
.ul-main li a:hover {
 background-color: #FBC02D;
}
.ul-main li ul {
 display: none;
 position: absolute;
 width: 20%;
}
.ul-main li:hover > ul {
 display: block;
}
.ul-main li ul li {
 position: relative;
}
.ul-main li ul li a {
 background-color: #FBC02D;
}
.ul-main li ul li a:hover {
 background-color: #FFEB3B;
}
.ul-main li ul li ul{
 right: -70%;
 top:0;
 width: 70%;
}
.clear
{
  clear: both;
}
.wrapper{
 width: 500px;
 background-color: red;
  margin-top: 10px;
}

<!DOCTYPE>
<html>
 <head>
  <meta charset="utf-8"/>
  <title>Ejercicio de Maquetación</title>
  <meta http-equiv="refresh" content="60"/>
  <link rel="stylesheet" href="css/contacto.css"/>
  <link rel="stylesheet" href="css/header.css"/>
 </head>
 <body>
 <header>
  <nav>
   <ul class="ul-main">
    <li><a href="index.html" >Inicio</a></li>
    <li class="somos"><a href="#" >Quienes somos</a>
     <ul>
      <li><a href="#" >Historia</a></li>
      <li id="azul"><a href="#" >Proyectos</a>
       <ul>
        <li><a href="#" >Huerta para estudiantes</a></li>
        <li><a href="#" >Comedor</a></li>
       </ul>
      </li>
     </ul>
    </li>
    <li><a href="contacto.html" >Contacto</a></li>
   </ul>
  </nav>
 </header>
  
  <div class="clear"></div>
  
 <section class="wrapper">
  <h2>Infórmate!</h2>
 
 </section>
 </body>
</html>

for more: https://stackoverflow.com/questions/1883414/why-top-margin-of-html-element-is-ignored-after-floated-element — Quynh Anh Le, Feb 20 '18 at 18:05

Css: Problems with floats

1 Answers1