La propiedad de estilo cssFloat en HTML DOM se usa para establecer o devolver la alineación horizontal del elemento. Esta propiedad permite que un elemento flote a la derecha o a la izquierda del cuerpo principal con el resto de los elementos envueltos a su alrededor.
Sintaxis:
- Devuelve la propiedad cssFloat.
object.style.cssFloat
- Se utiliza para establecer la propiedad cssFloat.
object.style.cssFloat = "left|right|none|initial|inherit"
Valores devueltos: Devuelve un valor de string que representa la alineación horizontal de un elemento
Valores de propiedad:
- Ninguno: Es el valor por defecto. Este valor no crea flotación.
- Izquierda: hace flotar el elemento al lado izquierdo del cuerpo/contenedor principal.
- Derecha: hace flotar el elemento al lado derecho del cuerpo/contenedor principal.
- Inicial: Establece el elemento en su posición inicial.
- Heredar: el elemento hereda su propiedad flotante del elemento principal.
Ejemplo 1:
html
<!DOCTYPE html>
<html>
<head>
<title>
HTML DOM Style cssFloat Property
</title>
</head>
<body>
<h1 id = "GFG">GeeksForGeeks</h1>
<h2>HTML | DOM cssFloat property</h2>
<button onclick = "RightFloat()">
Float right
</button>
<!-- script to set float of element -->
<script>
function RightFloat() {
document.getElementById("GFG").style.cssFloat
= "right";
}
</script>
</body>
</html>
Salida: Antes Haga clic en el botón:
Después de hacer clic en el botón:
Ejemplo 2:
html
<!DOCTYPE html>
<html>
<head>
<title>
HTML DOM Style cssFloat Property
</title>
</head>
<body>
<h1 id = "GFG">GeeksForGeeks</h1>
<h2>HTML | DOM cssFloat property</h2>
<button onclick = "RightFloat()">
Float Right
</button>
<button onclick = "LeftFloat()">
Float Left
</button>
<!-- script to set float of element -->
<script>
function RightFloat() {
document.getElementById("GFG").style.cssFloat
= "right";
}
function LeftFloat() {
document.getElementById("GFG").style.cssFloat
= "left";
}
</script>
</body>
</html>
Salida: Antes Haga clic en el botón:
Después de hacer clic en el botón flotante izquierdo:
Después de hacer clic en el botón flotante derecho:
Navegadores compatibles: los navegadores compatibles con la propiedad Style cssFloat se enumeran a continuación:
- Google Chrome 1 y superior
- Borde 12 y superior
- Internet Explorer 4 y superior
- Mozilla Firefox 1 y superior
- Safari 1 y superior
- Ópera 7 y superior
Publicación traducida automáticamente
Artículo escrito por ChinkitManchanda y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA