Curso CSS Completo: Aula 18 - Propriedade Float

[@programacaoweb]

Muito legal a propriedade Float, não é mesmo? Deixe seu like e se inscreva no canal :) Forte abraço!

[@lucianogoncalves3164]

Sim obrigado.

[@isaque5811]

Gente, o float não deve ser usado pra criar layouts ou posicionar elementos, isso a gente usa o flexbox. O float serve para criar efeitos específicos, fazendo com que os elementos ao redor contorne esse elemento com float.

[@programacaoweb]

Olá Isaque. A sua observação está correta. O uso do float no CSS foi inicialmente destinado a permitir que elementos flutuassem para o lado esquerdo ou direito de seus contêineres, permitindo assim que o conteúdo fluísse ao redor deles. Basicamente isso. Como na época que a propriedade foi criada não existia o flexbox (compatível a partir de 2014) nem grid (compatível a partir de 2017), que são propriedades recentemente adicionadas ao CSS, o float era frequentemente usado para criar layouts de várias colunas. Só que isso levava a muitos problemas de design, como clearfix hacks e dificuldades na manipulação do layout. Por essas questões, foram introduzidos novos métodos de layout no CSS, como o Flexbox e o Grid. O Flexbox, em particular, foi projetado para facilitar o design de layouts complexos e a organização de itens em uma interface, conforme a aula 27 deste curso vai mostrar. Cabe salientar que não existe regras com respeito ao uso "incorreto" do float. A propriedade não foi depreciada e por isso pode sim ser usada para posicionar elementos. Apenas é necessário ter bom senso e critério. Um exemplo clássico de uso do float seria criar um layout de revista ou jornal, onde o texto deve envolver imagens de forma específica. No mais, realmente é preferível usar flexbox. Grande abraço!

[@isaque5811]

@@programacaoweb era algo que eu tinha muita dificuldade há uns anos atrás, ao ponto de eu associar o flexbox como o substituto do float e que essa propriedade deveria ser ignorada por não ser necessária. Mas não é bem assim, apenas não tinha entendido (tbm né, a aula que eu tive foi na node studios, era ótima, mas muito resumida, esse de float era uns 3 ~ 4 minutos, assim é meio dificil de aprender algo complexo assim). Aliás, tô revendo toda a sua playlist pra fazer uma revisão, já faz uns 4 dias, vou entrar no mercado de trabalho e muitas vezes a gente peca no básico. Gosto muito da sua didática e pode ter certeza que vc foi um grande pilar na minha jornada. Abraços 🤝

[@programacaoweb]

@@isaque5811 Show Isaque. Grande abraço!

[@lukasalencar5018]

Surreal esse cara, didática incrível!

[@programacaoweb]

Obrigado Lukas. Abraço!

[@alisomdecamargo5576]

oi Professor acabei de assinar o seu curso com esse preço abençoado da black, eu precisava a grana tá curta gratidaõ meu professor voce é top1!!

[@enuciasemijoias9099]

Exelente aula! 💖💖💖

[@henriquev01]

Ótima aula! Obrigado!

[@florentinojr-pr-dg]

Que didática fantástica que voce tem... perfeita aula!

[@SakaPaulo]

Aula muito massa, entendi tudo e isso se deve a boa ordem que eu estou assistindo os vídeos.Muito obrigado professor!

[@renangomes9018]

Melhor aula de clear e float

[@mdsrafa]

Cara tuas aulas são incríveis eu já tenho uma base do curso em vídeo e tuas aulas tão me agregando muito ! Estou criando coragem e começar a pegar projetos freela para aprender e por a mão na massa !

[@programacaoweb]

Muito obrigado Rafael. Claro, tem que pegar projetos para fazer sim. Negócio é "se jogar na água" para aprender a nadar. Forte abraço!

[@shelbyrodrigues4715]

Conteúdo excelente

[@programacaoweb]

Muito obrigado 👨‍💻👍

[@adrianpatrick7713]

didática muito boa e objetiva , muito melhor que muitos cursos pago.

[@programacaoweb]

Muito obrigado Adrian. Grande abraço!

[@CleberCampos]

top demais, parabéns professor

[@leomaiabass1625]

Professor sensacional

[@programacaoweb]

Muito obrigado Leo! Abraço

[@Everaldobass]

Excelente aula sobre a propriedade Float.

[@programacaoweb]

Muito obrigado Everaldo! Forte abraço!

[@PekasMakeup]

amei toda vez q nao entendo alguma coisa na aula vejo aqui pra ver se vc ja explicou sobre obrigada ❤

[@programacaoweb]

Que bom que está te ajudando Gaby! Abraço!

[@CARDOLEO]

comecei a faculdade de engenharia da computação esse ano, suas aulas vem me agregando muito, no final do ano que irei ter muito mais tempo irei adquirir o seu curso para poder arrumar um estagio na area ano que vem

[@programacaoweb]

Valeu Léo. Fico feliz que está te ajudando. Grande abraço!

[@bkdante15]

Essa aula foi divisor de aguas no meu aprendizado.

[@MurilosilvaFX]

muito legal a aula!

[@benmoraes5511]

7:39

[@leo6955]

Aula incrível. Obrigado

[@programacaoweb]

Muito obrigado Leonardo !

[@robv097]

Muito Top!

[@programacaoweb]

Muito obrigado. Abraço!

[@lucasfajardo9397]

Curso Maravilhoso!!

[@programacaoweb]

Muito obrigado Lucas!! Grande abraço!

[@JeffersonDeveloper]

adorei esta aula muito interessante,

[@ifzq0]

Poxa, já tentei de tudo, 😪😪😪 mas meu VSCode não gera P>LOREM,... e também não gera autocompletação automática quando digito div.container. Não sei mais o que fazer, já atualizei o VScode e tb a extenção intelisense HTML CSS. Alguém tem alguma ideia do que posso fazer para resolver isso?

[@Lanbyteach]

Aula top , super explicação. Agradeço !

[@luizcarlos8289]

Muito legal essa

[@AndersonSantos-ur4nf]

Muito bom o conteúdo, parabéns.

[@programacaoweb]

Muito obrigado Anderson! 👨🏻‍💻👍

[@teylorfernandoeleuteriogar9452]

Obg pela aula, ajudou bastante, bem completa.

[@programacaoweb]

Valeu Teylor. Um forte abraço!

[@lucasgorzizadasilva540]

Ótima aula, mas tenho algumas perguntas... - No minuto 3:10 você digita '.container img' fiquei em dúvida, já que nunca tinha visto este uso, somente vi '.container' e 'img' separados, o que quer dizer os dois juntos assim? - No minuto 10:01 você digita 'li a', qual o motivo desse li a? Porque não botou tudo dentro do li? bom essas são as perguntas, se deu para responder eu agradeceria muito, se não der já estou agradecido tb ;)

[@programacaoweb]

Oi Lucas. Esses conceitos foram apresentados lá na aula 04 de seletores. É um seletor mais especifico. Com ".container img" estou selecionando o elemento com a classe "container" e dentro dela quero selecionar a imagem img. Algo do tipo: "dentro de container afete apenas img". Mesma coisa "li a" estou dizendo que dentro do "li" quero afetar apenas os links "a" com essas propriedades. Espero que tenha entendido. Forte abraço!

[@lucasgorzizadasilva540]

@@programacaoweb nossa, baita explicação, agora faz sentido haha desculpe e obrigado.

[@lucasgorzizadasilva540]

@@programacaoweb o mesmo ocorre com '.login a:hover'?

[@CezarXGameR]

parabéns pelo conteudo

[@programacaoweb]

Valeu Cezar! Muito obrigado!

[@gitech9]

São muitas propriedades professor, poderia falar quais as mais utilizadas?

[@programacaoweb]

Olá Girlene. Oficialmente existem mais de 500 propriedades CSS definidas. Mas nesse curso estamos aprendendo as principais e mais importantes. Então as mais utilizadas são essas apresentadas nos vídeos. Algumas que podemos destacar: display, margin, padding, width, height, background, color, font-size, font-family, text-align, border, position, float, opacity, box-shadow, border-radius, media queries e por ai vai. Abraço!

[@Lsantos021-z1x]

Uma dúvida poderia usar display flex pra alinha texto e imagem um do lado do outro e no caso do menu poderia usar flex tbm isolando o último botão com uma div ?

[@programacaoweb]

Sim é possivel usando o display flex 👍

[@giovanniCS]

Estou com dúvida. Pra fazer o site, é preciso colocar os links nessas listas? Eu vi que quando clicamos no padding o link não funciona. Não seria melhor criar o menu sem ser essa lista?

[@AglerLopes]

Professor é possivel definir a flutuação de um parágrafo?

[@programacaoweb]

Olá Angler. Normalmente não trabalhamos com float para parágrafos, mas sim com text-align, já que os parágrafos são elementos de bloco. Se quer colocar o texto a esquerda text-align: left; ao centro text-align:center; a direita text-align: right; e justificado text-align: justify; Abraço!

[@rafaelfavoretti8872]

Nice!

[@programacaoweb]

Thanks! :)

[@apenaseu321]

AAAA Meu login não vai pro lado de jeito nenhum, fica bugado. Ja revisei meu código várias vezes e parece tudo igual ao seu mas não sei o que é. Fessô Help!!😭

[@VerciGuedes]

Professor , estou com problema no visual estudio code, ele não tá fazendo alguns comandos, como colocar as cores e outros comandos, já desinstalei e instalei de novo e mesmo assim não funciona , nem coisas simples como como colocar cor " color" e "background" já faz umas duas aulas que vejo que não está funcionando, se puder me ajudar eu agradeço

[@programacaoweb]

Olá. Não sei se entendi... você não está conseguindo digitar no VS Code?

[@VerciGuedes]

@@programacaoweb consegui descobrir o erro, e o erro era meu mesmo no HTML eu apaguei sem querer a tag (link rel = "stylesheet" href = css/estilo.css" Agora estou ja estou na última aula, obrigado pela sua atenção a parabéns pelo seus trabalhos, que Deus te abençoe muito