Float: right; e Clear: both;

27/07/2019

0

OBS: .BLOCO3
CLEAR: BOTH ; NÃO FUNCIONOU ?
O BLOCO 3 ESTÁ COM O BLOCO 4 ENCOSTADO A SUA ESQUERDA.
FICO GRATO SE ALGUÉM EXPLICAR?



.container {
text-align: center;
line-height: 200px;
font-size: 50px;
}
.bloco1 {
height:200px; width: 200px;
background: #00FFFF;
float: right;
}
.bloco2 {
height:200px; width: 200px;
background: #FF4500;
float: right;
}
.bloco3 {
height:200px; width: 200px;
background: #7B68EE;
float: right;
clear: both;
}
.bloco4 {
height:200px; width: 200px;
background: #FFFF00;
float: right;
}
.bloco5 {
height:400px; width: 400px;
background: #FF1493 ;
line-height: 400px;
float: right;
}
Fabio Akira

Fabio Akira

Responder

Post mais votado

27/07/2019

Crie uma classe .clear {clear=both;}, no html crie um div vazia após as divs que você usa o float e aplique a case clear. Espero ter ajudado.

Lucas Rodrigues

Lucas Rodrigues
Responder

Mais Posts

28/07/2019

Fabio Akira

Crie uma classe .clear {clear=both;}, no html crie um div vazia após as divs que você usa o float e aplique a case clear. Espero ter ajudado.


Deu Certo obrigado!!! Porém eu queria saber o porque disso acontecer, se poder explicar com mais detalhes eu agradeço?!
Responder

03/08/2019

Lucas Rodrigues

Crie uma classe .clear {clear=both;}, no html crie um div vazia após as divs que você usa o float e aplique a case clear. Espero ter ajudado.


Deu Certo obrigado!!! Porém eu queria saber o porque disso acontecer, se poder explicar com mais detalhes eu agradeço?!


Basicamente é o seguinte, quando você usa float nos elementos eles saem do fluxo normal do html, essa div onde você aplicou os clear, ela zera as funcionalidades do float fazendo com que os outros elementos respeite esse fluxo, é quase que um bug do css.
Responder

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar