Defina a altura para o elemento pai anterior. NOTA: No desenvolvimento corporativo, não escreva a altura se puder fazê -lo.
<! Doctype html> <html lang = en> <head> <meta charset = utf-8> <title> d131_clearfloat </title> <style> .smallbox1 {width: 100px; Altura: 100px; cor de fundo: vermelho; Boder: 3px preto sólido; margem: 5px; float: direita;} .smallbox2 {width: 100px; Altura: 100px; cor de fundo: vermelho; Boder: 3px preto sólido; margem: 5px;} .smallbox3 {width: 100px; cor de fundo: vermelho; Boder: 3px preto sólido; margem: 5px;} .smallbox3 {width: 100px; Altura: 100px; cor de fundo: vermelho; Boder: 3px preto sólido; margem: 5px;} .smallbox4 {width: 100px; Altura: 100px; cor de fundo: vermelho; Boder: 3px preto sólido; margem: 5px;} .smallbox5 {largura: 100px; Altura: 100px; cor de fundo: vermelho; Boder: 3px preto sólido; margem: 5px;} .smallbox6 {width: 100px; Altura: 100px; cor de fundo: vermelho; Corpo: 3px preto sólido; margem: 5px;} .bigbox1, .bigbox2 { /*width: 400px;* / /*width: 400px;* / cor de fundo: verde; borda: 3px preto sólido; } </style> </ad Head> <body> <div class = bigbox1> <div class = smallbox1> </div> <div class = smallbox2> </div> <div class = smallbox3> </div> </div> <Div Class = bigbox2> <class class = pequeno class = smallbox5> </div> <div class = smallbox6> </div> </div> </body> </html> 2. A segunda maneira de limpar o flutuadorAdicione um atributo claro ao seguinte atributo
O atributo claro leva o valor:
Nenhum: o valor padrão é tomado, classificado de acordo com as regras de classificação dos elementos flutuantes (flutuação esquerda para encontrar flutuação esquerda, flutuação direita para encontrar flutuação direita)
Esquerda: não procure o elemento flutuante esquerdo na frente
Direita: não procure o elemento flutuante certo na frente
Ambos: não procure os elementos flutuantes e flutuantes à esquerda na frente
Por exemplo: não definimos a largura e a altura da caixa grande, a caixa pequena suportará a caixa grande, mas as duas grandes caixas estarão seguidas por causa disso.
.smallbox1 {width: 100px; Altura: 100px; flutuar: esquerda; cor de fundo: vermelho; borda: 2px preto sólido; } .smallbox2 {width: 100px; Altura: 100px; flutuar: esquerda; cor de fundo: vermelho; borda: 2px preto sólido; } .smallbox3 {width: 100px; Altura: 100px; flutuar: esquerda; Background-Color: Blue; borda: 2px preto sólido; } .smallbox4 {width: 100px; Altura: 100px; flutuar: esquerda; Background-Color: Blue; borda: 2px preto sólido; } </style> </ad Head> <body> <div class = bigbox1> <div class = smallbox1> </div> <div class = smallbox2> </div> </div> <div class = bigbox2> <div class = smallbox3> </div> <class class = smallbox4> </div> </div> </body>Usamos o atributo claro na terceira caixa pequena, para que possamos iniciar uma nova linha (a quarta não é necessária, porque queremos que o terceiro seja próximo ao quarto), e precisamos apenas do código da terceira caixa pequena para modificar o código.
.SmallBox3 {Clear: Left; Largura: 100px; Altura: 100px; flutuar: esquerda; Background-Color: Blue; borda: 2px preto sólido; }Nota: O atributo de margem expirou e falaremos sobre o método que não expira na próxima vez.
3. Código -fonte:D131_clearfloat.html
D132_clearattribute.html
endereço:
https://github.com/rugege66/html_learning/blob/master/d131_clearfloat.html
https://github.com/rugege66/html_learning/blob/master/d132_clearattribute.html
ResumirO exposto acima são duas maneiras de limpar o HTML flutuante que o editor apresenta a você. Espero que seja útil para você. Se você tiver alguma dúvida, deixe -me uma mensagem e o editor responderá a você a tempo. Muito obrigado pelo seu apoio ao site wulin.com!
Se você acha que este artigo é útil para você, reimprimi -lo. Por favor, indique a fonte, obrigado!