1. Características del posicionamiento flotante:
- Fuera del flujo de documentos, no ocupa posición, no está controlado por la disposición predeterminada (de izquierda a derecha, de arriba a abajo)
- No importa cómo flote, todavía está en la caja.
- El elemento se acoplará a la izquierda o derecha del elemento principal, o a la izquierda o derecha de un elemento ya flotante.
- Después de que los elementos a nivel de bloque flotan, la adaptación del ancho ya no es del 100%
- Una vez que el elemento en línea flote, se convertirá en un elemento a nivel de bloque
2. Propiedad flotante
- float: none: predeterminado, no se establece ningún posicionamiento flotante
- flotar: izquierda: flotar hacia la izquierda
- flotar: derecha: flotar hacia la derecha
3. Ejemplo sencillo
<body>
<div class="mydiv">
<div class="d1">第一个</div></div>
<div class="d2">第二个</div>
<div class="d3">第三个</div>
<div class="d4">第四个</div>
<div class="d5">第五个</div>
</div>
</body>
Sin efecto antes de la configuración:
después de hacer flotar los cuatro cuadros respectivamente:
.d1,.d2,.d3,.d4,.d5{
width: 100px;
height: 100px;
float: left;
}
.d1{
background-color:blue;
}
.d2{
background-color:pink;
}
.d3{
background-color:green;
}
.d4{
background-color:purple;
}
.d5{
background-color:red;
}
</style>
<body>
<div id="mydiv">
<div class="d1">第一个</div></div>
<div class="d2">第二个</div>
<div class="d3">第三个</div>
<div class="d4">第四个</div>
<div class="d5">第五个</div>
</div>
</body>
Representaciones:
4. El elemento padre colapsa.
Debido a que el posicionamiento flotante está separado del flujo de documentos y no ocupa la posición, si un elemento secundario de un elemento está configurado para flotar y el elemento no tiene una altura establecida, entonces la altura del elemento, es decir, el padre elemento, se convertirá en 0, que es la altura del colapso del elemento principal.
Por ejemplo, en el cuadro mydiv del ejemplo anterior, podemos ver claramente el efecto después de agregar un borde:
entonces, en este caso, debemos borrar el flotante.
5. Borrar flotante (para solucionar el colapso del elemento padre)
- Establezca la altura del elemento principal (la altura será fija, generalmente no se recomienda)
<style>
#d{
/*1.给父元素设置高度 height*/
height: 300px;
}
#d1{
width: 80px;
height: 80px;
float: left;
background-color: red;
}
#d2{
float:left;
width: 100px;
height:80px;
background-color: green;
}
#d3{
float:left;
width: 120px;
height:80px;
background-color: blue;
}
</style>
<body>
<div class="clearDiv" id="d">
<div id="d1">这是div1</div>
<div id="d2">这是div2</div>
<div id="d3">这是div3</div>
</div>
</body>
- Establezca un desbordamiento para el elemento principal (la parte que necesita desbordarse también estará oculta, no se recomienda)
<style>
#d{
/*3.给父元素设置一个overflow*/
overflow: hidden; /*溢出隐藏*/
}
#d1{
width: 80px;
height: 80px;
float: left;
background-color: red;
}
#d2{
float:left;
width: 100px;
height:80px;
background-color: green;
}
#d3{
float:left;
width: 120px;
height:80px;
background-color: blue;
}
</style>
<body>
<div class="clearDiv" id="d">
<div id="d1">这是div1</div>
<div id="d2">这是div2</div>
<div id="d3">这是div3</div>
</div>
</body>
- Agregue un hijo más pequeño al elemento padre (agregue un elemento vacío a nivel de bloque) Establezca claro: ambos a este hijo (agregue semántica sin sentido, lo cual no favorece el mantenimiento posterior, no se recomienda)
<style>
/*3.给父元素添加一个最小的儿子，给这个儿子添加clear：both;*/
.clear{
clear: both;
}
#d1{
width: 80px;
height: 80px;
float: left;
background-color: red;
}
#d2{
float:left;
width: 100px;
height:80px;
background-color: green;
}
#d3{
float:left;
width: 120px;
height:80px;
background-color: blue;
}
</style>
<body>
<div class="clearDiv" id="d">
<div id="d1">这是div1</div>
<div id="d2">这是div2</div>
<div id="d3">这是div3</div>
<div class="clear"></div>
</div>
</body>
- Utilice CSS: después del pseudoelemento para el elemento principal (recomendado)
<style>
/* 4.给父元素设置after 给after设置clear:both */
.clearDiv:after{
content:'' ;
display: block;
clear: both;
}
#d1{
width: 80px;
height: 80px;
float: left;
background-color: red;
}
#d2{
float:left;
width: 100px;
height:80px;
background-color: green;
}
#d3{
float:left;
width: 120px;
height:80px;
background-color: blue;
}
</style>
<body>
<div class="clearDiv" id="d">
<div id="d1">这是div1</div>
<div id="d2">这是div2</div>
<div id="d3">这是div3</div>
</div>
</body>