Utilitzeu la propietat CSS flotant per dissenyar dissenys de pàgines web
La propietat CSS és una propietat molt important per al disseny. Permet col·locar els dissenys de la vostra pàgina web exactament com vulgueu que es mostrin, però per utilitzar-lo heu d'entendre com funciona.
En un full d'estils, la propietat CSS flotant té el següent aspecte:
.right {float: right; }
Això indica al navegador que tot amb la classe de "dreta" s'hauria de flotar cap a la dreta.
Us ho assignaria així:
class = "right" />
Què pots flotar amb la propietat flotant CSS?
No podeu flotar tots els elements d'una pàgina web. Només podeu flotar elements del bloc . Aquests són els elements que ocupen un bloc d'espai a la pàgina, com ara imatges (), paràgrafs (), divisions () i llistes ().
Altres elements que afecten el text, però no creen un quadre a la pàgina, s'anomenen elements en línia i no es poden flotar. Aquests són elements com span (), breaks de línia (), fort èmfasi (), o cursiva ().
On floten?
Podeu flotar elements a la dreta o a l'esquerra. Qualsevol element que segueixi l'element flotant fluirà al voltant de l'element flotant a l'altre costat.
Per exemple, si surto una imatge a l'esquerra, qualsevol text o altres elements que segueixin flueixin a la dreta. I si surto una imatge a la dreta, qualsevol text o altres elements que segueixin flueixin a l'esquerra. Una imatge que es col·loca en un bloc de text sense cap tipus d'estil flotant que s'aplicarà a ella es mostrarà però el navegador està configurat per mostrar imatges.
Això sol ser amb la primera línia del text següent que es mostra a la part inferior de la imatge.
Què tan lluny van a flotar?
Un element que s'ha flotat es mourà fins a l'esquerra o a la dreta de l'element contenidor com es pot. Això es tradueix en diverses situacions diferents depenent de com s'escriu el codi.
Per a aquests exemples, vaig a flotar un petit element DIV a l'esquerra:
- Si l'element flotant no té un ample predefinit, ocuparà tants espais horitzontals que siguin necessaris i disponibles, independentment del flotador. Nota: alguns navegadors intenten col · locar elements al costat d'elements flotants quan l'amplada no està definit, generalment donant a l'element no flotant només una petita quantitat d'espai. Així, sempre haureu de definir un ample en elements flotants.
- Si l'element contenidor és l'element HTML, el DIV flotant se situarà al marge esquerre de la pàgina.
- Si l'element contenidor està contingut per una altra cosa, el DIV flotant se situarà al marge esquerre del contenidor.
- Podeu niar elements flotants, i això pot fer que la flota finalitzi en un lloc sorprenent. Per exemple, aquest flotador és un DIV flotat a l'esquerra dins d'un dret DIV flotat.
- Els elements flotants s'asseu al costat de l'altre si hi ha espai al contenidor. Per exemple, aquest contenidor té tres elements DIV amplis de 100 píxels flotats en un contenidor ampli de 400 píxels.
Fins i tot podeu utilitzar flotadors per crear un disseny de galeria de fotos. Poseu cada miniatura (funciona millor quan tenen la mateixa mida) en un DIV amb el títol i el flotant dels elements DIV al contenidor.
No importa l'ample que sigui la finestra del navegador, les miniatures s'alineen uniformement.
Desactivació del flotador
Una vegada que sàpigues com aconseguir que un element surti, és important saber com desactivar la flotació. Apaga el flotant amb la propietat CSS clear. Podeu netejar els flotadors a l'esquerra, els flotadors a la dreta o tots dos:
clar: esquerre;
clar: correcte;
clar: tots dos;
Qualsevol element que configureu la propietat clara apareixerà a sota d'un element que flota aquesta adreça. Per exemple, en aquest exemple, els dos primers paràgrafs del text no s'esborren, però el tercer és.
Juga amb el valor clar dels diferents elements dels teus documents per obtenir diferents efectes de disseny.
Un dels dissenys flotants més interessants és una sèrie d'imatges a la columna dreta o esquerra al costat dels paràgrafs del text. Fins i tot si el text no és prou llarg com per desplaçar-se per la imatge, podeu utilitzar el clar a totes les imatges per assegurar-se que apareixen a la columna en comptes de al costat de la imatge anterior.
L'HTML (repetiu aquest paràgraf):
Duis aute irure dolor sed do eiusmod temporal incididunt en reprehenderit in voluptate. Cupidatat no assenyalat, utilitzat i malmès en gran mesura.
El CSS (per flotar les imatges a l'esquerra):
img.float {float: left;
clar: esquerre;
marge: 5px;
}
I a la dreta:
img.float {float: right;
clar: correcte;
marge: 5px;
}
Ús de flotadors per al disseny
Una vegada que enteneu com funciona la propietat flotant, podeu començar a utilitzar-la per dissenyar les vostres pàgines web. Aquests són els passos que he adoptat per crear una pàgina web flotant:
- Dissenyeu el disseny (en paper o en una eina gràfica o al meu cap).
- Determineu on seran les divisions de pàgines.
- Determineu els amples dels diferents contenidors i els elements que hi ha dins.
- Flota tot. Fins i tot l'element de contenidor més extern està flotat cap a l'esquerra, de manera que sé on estarà relacionat amb el port de vista del navegador.
Sempre que sàpigues els amples (percentatges que estan bé) de les seccions de disseny, podeu utilitzar la propietat flotant per posar-los on pertanyen a la pàgina. I el millor és que no cal que us preocupeu tant pel que el model de caixa sigui diferent per a Internet Explorer o Firefox.