Problem z :after

pytanie zadane 19 października 2016 w HTML i CSS przez damian23415 Użytkownik (890 p.)

Tak jak w temacie mam problem z :after, ponieważ po dodaniu do css clear: both; nic się nie dzieje dalsza część tekstu ma parametr float: left i umieszca sie z lewej strony loga. A to kod HTML I CSS

<!DOCTYPE HTML>

<html lang="pl">
<head>
  <meta charset="utf-8">

  <title></title>
  <meta name="description" content="">

  <link rel="stylesheet" href="style.css">


</head>

<body>

	<header class="top">
		<div class="logo" >
			<img src="images/logo.png" alt="#" />
		</div>
			asdasd
	</header>


	


</body>
</html>

body
{
	background-color: #303030;
}

.top
{
	width: 1024px;
	height: 1000px;
	margin-left: auto;
	margin-right: auto;
	background-image: url(images/top.jpg);
}


.logo
{
	margin-left: 20px;
	float: left;
	margin-top: 10px;
}

.logo:after 
{
    content: ".";
    display: block;
    clear: both;
    }

1 odpowiedź

odpowiedź 19 października 2016 przez Przemek Zembrzuski Gaduła (3,240 p.)

po co ci kropka w content ?

komentarz 19 października 2016 przez damian23415 Użytkownik (890 p.)

Nie potrzebna, ale próbowałem wszelakich rozwiązań ;)

komentarz 19 października 2016 przez Przemek Zembrzuski Gaduła (3,240 p.)

Poczytaj sobie o display flex a jeżeli koniecznie chcesz to rozwiązać floatami to tutaj masz rozwiązanie:

body
{
    background-color: #303030;
}

.top
{
    width: 1024px;
    height: 1000px;
    margin-left: auto;
    margin-right: auto;
    background-image: url(images/top.jpg);
}

.logo
{
    margin-left: 20px;
    margin-top: 10px;
}
img{
  float: left;
}
.logo:after
{
    content: "";
    display: block;
    clear: both;
    }

komentarz 20 października 2016 przez pablop76 VIP (123,540 p.)
edycja 20 października 2016 przez pablop76

Tak właśnie jest jak napisał Przemek. Zauważ, że :after wstawia element po tym co jest wewnątrz tego elementu, a nie po nim. Czyli w twoim przypadku czyści float: left dla img, który przecież go nie ma. A div .logo dalej ma float:left. A jeżeli chcesz to zrobić tak jak to rozumiesz to daj <div style="clear: both"></div> po <div class="logo"><img src="images/logo.png" alt="#" /></div>