1: The layout of the web page
<!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>
pay attention:
Float features: 1: Floating elements can set the width and height of in-line elements. 2: Remember, floating elements can use inner and outer margins. 3: In-line/block-level/in-line block-level elements are not distinguished during floating. Both can be set Width and height. 4: Floating elements are a horizontal typesetting thing. 5: Floating is very similar to inline block-level elements. 6: Float can only be typeset horizontally. Disadvantages: 1: There is no center alignment in floating, no. Only left-aligned and right-aligned Alignment. 2: But you cannot use margin: 0 auto; this is invalid. What is horizontal typesetting? Inline elements/inline block-level elements What is vertical typesetting? Block-level elements
effect:
2: Off-standard floating elements
Code example:
<!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>
Pay attention.
What is off-standard?
1: If an element is set to float, it will leave the standard flow (off-standard). It seems to be floating. It will cover the element that is not floating.
effect:
Floating element sorting rules
<!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>
Note : For
floating elements in the same direction, the first floating element will be displayed in the front, and the second floating element will be displayed in the back
of the floating elements in different directions. Left floating will find left floating, right floating will find right floating.
Difficulty:
Floating The position of the element after floating is determined by the position of the floating element in the standard stream before floating.
What does it mean?
If the floated element is in the first row, it will also be in the first row after the float. (It's just in the form of a float)
effect:
Snap phenomenon of floating elements
<!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>
Note:
What is the floating element snapping phenomenon?
1. If the width of the parent element can display all floating elements, then the floating elements will be displayed side by side
2. If the width of the parent element cannot display all floating elements, then the last element will be displayed ·Start to snap forward
3. If all floating elements cannot be displayed after snapping, they will eventually snap to the left or right of the parent element.
effect:
Floating element character surrounding phenomenon:
<!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>
Pay attention to,
1. What is the word enclosing phenomenon of floating elements ?
Floating elements will not block the text in the non-floating element, and the text without floating will automatically give position to the floating element. This is the phenomenon of floating element word enclosing
effect:
Floating element height problem
<!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>
Note that
the elements floating in the floating stream cannot support the height of the parent element
effect:
