1: el diseño de la página web
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
*{
padding: 0px;margin: 0px;}
.box1
{
width: 100px;
height: 100px;
background-color: red;
float: left;
}
.box2
{
width: 100px;
height: 100px;
background-color: blue;
float: right;
margin-right: 100px;
}
</style>
</head>
<body>
<span class="box1"></span>
<span class="box2"></span>
</body>
</html>
presta atención:
Características flotantes: 1: Los elementos flotantes pueden establecer el ancho y la altura de los elementos en línea. 2: Recuerde, los elementos flotantes pueden usar márgenes internos y externos. 3: Los elementos en línea / nivel de bloque / nivel de bloque en línea no se distinguen durante la flotación. Ambos se pueden configurar Ancho y alto. 4: Los elementos flotantes son una cosa de composición tipográfica horizontal. 5: La flotación es muy similar a los elementos de nivel de bloque en línea. 6: Float solo se puede componer de forma horizontal. Alineación. 2: Pero no puede usar el margen: 0 automático; esto no es válido. ¿Qué es la composición tipográfica horizontal? Elementos en línea / elementos a nivel de bloque en línea ¿Qué es la composición tipográfica vertical? Elementos a nivel de bloque
efecto:
2: elementos flotantes fuera de estándar
Ejemplo de código:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
*{
padding: 0px;margin: 0px;}
.box1
{
float: left;
width: 100px;
height: 100px;
background-color: red;
}
.box2
{
width: 150px;
height: 150px;
background-color: blue;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
</body>
</html>
Preste atención
¿Qué está fuera del estándar?
1: Si un elemento está configurado para flotar, dejará el flujo estándar (fuera del estándar). Parece estar flotando. Cubrirá el elemento que no flota.
efecto:
Reglas de clasificación de elementos flotantes
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
*{
padding: 0px;margin: 0px;}
.box1
{
float: left;
width: 50px;
height: 50px;
background-color: red;
}
.box2
{
width: 100px;
height: 100px;
background-color: pink;
}
.box3
{
float: left;
width: 150px;
height: 150px;
background-color: yellow;
}
.box4
{
width: 200px;
height: 200px;
background-color: blue;
}
</style>
</head>
<body>
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
</body>
</html>
Nota : Para
elementos flotantes en la misma dirección, el primer elemento flotante se mostrará en el frente y el segundo elemento flotante se mostrará en la parte posterior
de los elementos flotantes en diferentes direcciones. La flotación izquierda encontrará flotante izquierda, la flotante derecha encontrará flotante derecha.
Dificultad:
Flotante La posición del elemento después de flotar está determinada por la posición del elemento flotante en el flujo estándar antes de flotar.
¿Qué significa?
Si el elemento que se va a flotar está en la primera fila, también estará en la primera fila después del flotador (solo tiene la forma de un flotador).
efecto:
Fenómeno snap de elementos flotantes
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
*{
padding: 0px;margin: 0px;}
.father
{
width: 400px;
height: 400px;
background-color: yellow;
}
.box1
{
float: left;
width: 50px;
height: 300px;
background-color: red;
}
.box2{
float: left;
width: 50px;
height: 100px;
background-color: green;
}
.box3{
float: left;
width: 250px;
height: 100px;
background-color: blue;
}
/*.box4
{
float: left;
width: 500px;
height: 500px;
background-color: black;
}*/
</style>
</head>
<body>
<div class="father">
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</div>
</body>
</html>
Preste atención a:
¿Cuál es el fenómeno de la rotura de elementos flotantes?
1. Si el ancho del elemento principal puede mostrar todos los elementos flotantes, entonces los elementos flotantes se mostrarán uno al lado del otro
2. Si el ancho del elemento principal no puede mostrar todos los elementos flotantes, entonces se mostrará el último elemento · Empiece a avanzar hacia adelante
3. Si todos los elementos flotantes del frente no se pueden mostrar después del ajuste, eventualmente se ajustarán a la izquierda o derecha del elemento principal.
efecto:
Fenómeno circundante de carácter de elemento flotante:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>62-浮动元素字围现象</title>
<style>
div{
float: left;
width: 100px;
height: 100px;
/*background-color: red;*/
border: 1px solid #000;
}
p{
width: 500px;
height: 500px;
background-color: yellow;
}
img{
float: left;
}
</style>
</head>
<body>
<!--<div></div>-->
<img src="images/girl.jpg" alt="">
<p>1999年-2002年范冰冰一共出演了《青春出动》、《小李飞刀》、《秦始皇》、《中关村风云》、《少年包青天2》《尘埃落定》等十七部电视剧[12] ，以及《河东狮吼》等三部电影[13] 。
2003年在由梁羽生小说改编的电视剧《萍踪侠影》中饰演女主角云蕾。同年在冯小刚执导的贺岁档电影《手机》中饰演女主角武月[14] 。
2004年凭借电影《手机》获得第27届大众电影百花奖最佳女主角奖，同时《手机》也获得大众电影百花奖最佳故事片奖。[2] 9月，出演根据古龙小说改编的古装剧《小鱼儿与花无缺》，饰演女主角铁心兰[15] 。同年出演《大唐芙蓉园》中的杨玉环等五部电视剧，以及电影《千机变2》和《情癫大圣》[16] 。
2005年发行首张个人专辑《刚刚开始》，这张处女大碟由圈内多位音乐人联袂制作，包含了多种风格迥异的音乐元素。[3] 同年主演由张之亮执导的古装片《墨攻》，饰演女主角逸悦。[17]
2006年出演电视剧《封神榜之凤鸣岐山》，饰演女主角苏妲己。之后接连拍摄《苹果》、《导火线》、《心中有鬼》等六部电影[18] 。
2007年2月，主演的电影《苹果》入围第57届柏林国际电影节主
范冰冰
范冰冰(23张)
竞赛单元，导演李玉，女主演范冰冰，男主演佟大为共同出席本届电影节。[19] 6月，范冰冰与华谊约满，自组工作室，投资拍摄民国剧《胭脂雪》，并首次担当制片人，同时饰演女主角文玉禾[20] 。10月，凭借电影《苹果》获得第四届欧亚国际电影节最佳女演员奖。[21] 同年出演《合约情人》、《精舞门》、《新宿事件》等五部电影[22] 。同年凭借电影《心中有鬼》获得第44届台湾电影金马奖最佳女配角[4] 。</p>
</body>
</html>
Presta atención a:
1. ¿Cuál es el fenómeno de encierra de palabras de los elementos flotantes ?
Los elementos flotantes no bloquearán el texto en el elemento no flotante, y el texto sin flotar automáticamente le dará posición al elemento flotante. Este es el fenómeno de la palabra de elemento flotante que encierra
efecto:
Problema de altura del elemento flotante
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>64-浮动元素高度问题</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
border: 1px solid #000;
}
p{
float: left;
width: 50px;
height: 50px;
background-color: red;
}
</style>
</head>
<body>
<div>
<p></p>
</div>
</body>
</html>
Tenga en cuenta que
los elementos que flotan en la secuencia flotante no pueden soportar la altura del elemento principal
efecto:
