Olá tudo bem?
Eu estava tentando reproduzir uma pagina de currículo pessoal com os cursos de html e css que realizar, mas fiquei com uma duvida a respeito do funcionamento do float e do cleat.
(parte "sobre mim" no CSS)
A imagem " .eu " não fica dentro do container ".principal" ele fica pra fora não respeitando aquele espaçamento azul que aparece no inspecionar elemento do navegador. No curso pelo que vi tinha funcionado o comandado respeitando o espaçamento.
A única maneira que eu encontrei de arrumar era usar um comando overflow:hiden dentro do ".principal", mas o clear float não deveria ter a mesma função? tentei de várias maneiras usando o clear e não consegui
Eu não sei se me fiz muito claro com a minha dúvida, qualquer coisa posso tentar explicar melhor.
HTML
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="style.css">
<title>Currículo-eu</title>
</head>
<body>
<header>
<div class="caixa">
<h1>Meu nome</h1>
<nav>
<ul>
<li><a href="">Sobre mim</a></li>
<li><a href="">Currículo</a></li>
<li><a href="">Entre em contato</a></li>
</ul>
</nav>
</div>
</header>
<img class="foto" src="pexels-negative-space-169573.jpg" alt="">
<main>
<section class="principal">
<h2 class="titulo-principal">Sobre Mim</h2>
<img class="eu" src="vinicius.jpg" alt="aaa">
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the
industry's standard dummy text ever since the 1500s,</p>
<p> There are many variations of passages of Lorem Ipsum available, but the majority have suffered
alteration in some form, by injected humour</p>
</p>
<p>t is a long established fact that a reader will be distracted by the readable content of a page when
looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution
</p>
</section>
<!-- <section class="habilidades">
<h3 class="titulo-principal">Habilidades</h3>
<ul class="lista-habilidades">
<li><img src="./img/javascript-736400_640.png" alt="Simbolo javascript"></li>
<li><img src="./img/html5-3384014_640.png" alt="Simbolo html"></li>
<li><img src="./img/css.png" alt="Simbolo CSS"></li>
<li><img src="./img/reactt.png" alt="Simbolo REACT"></li>
</ul>
</section> -->
<!--
<section class="projetos">
<h3>Projetos Elaborados</h3>
<div class="cards">
</div>
</section> -->
</main>
<footer>
</footer>
</body>
</html>
header{
background: ##959595;
padding: 50px 0;
}
.caixa {
position: relative; /*tira do flow do documento*/
width: 940px;
margin: 0 auto;
}
nav {
position: absolute;
top: 0px;
right: 0;
}
nav li{
display: inline;
margin: 0 0 0 15px;
}
nav a{
text-transform: uppercase;
color: black;
font-weight: bold;
font-size: 22px;
text-decoration: none;
}
nav a:hover {
color: rgb(38, 38, 194);
text-decoration: underline;
}
.foto {
width: 100%;
height: 900px;
}
/* sobre mim */
.titulo-principal {
padding: 20px;
text-align: center;
font-size: 2em;
margin: 1em 5em 0;
clear: left;
}
.principal {
padding: 4em 0;
width: 940px;
margin: 0 auto;
}
.principal p {
margin: 0 0 1em;
}
.eu {
width: 250px;
margin: 0 20px 20px 0;
float: left;
}
/* Habilidades */
.habilidades {
background: linear-gradient(#FEFEFE, #888888);
}
.habilidades img{
max-width: 75px;
}
.lista-habilidades{
display: flex;
align-items: center;
margin-left: 25%;
margin-right: 25%;
justify-content: space-around;
}