day 9

浮动依次贴边练习

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

padding: 0;

margin: 0;

}

.outer{

width: 940px;

height: 440px;

padding: 10px;

/* auto让盒子居中显示 */

margin: 10px auto;

border:1px solid black;

}

/* 将outer里面的所有div标签统一设置float：left； */

.outer div{

float:left;

}

.outer .box1{

width: 300px;

height: 260px;

background-color:pink;

}

.outer .box2{

width: 240px;

height: 260px;

background-color:cyan;

}

.outer .s_box{

width: 200px;

height: 130px;

}

.outer .box3{

background-color:yellowgreen;

}

.outer .box4{

background-color:greenyellow;

}

.outer .box7{

width: 300px;

height: 180px;

background-color:cyan;

}

.outer .box8{

width: 160px;

height: 180px;

}

.outer .box5{

background-color:blue;

}

.outer .box6{

background-color:purple;

}

</style>

</head>

<body>

</div>

</body>

</html>

浮动margin塌陷现象

标准流有margin塌陷的现象

浮动元素没有了标准流的margin塌陷现象，各自有各自的margin，不会互相塌陷。

浮动元素让出标准流：

标准流中的元素都有自己的标准流位置，后面的元素只能在前面元素的后面进行加载

浮动元素脱离了标准流，它会让后面的元素占有自己原来的位置、显示效果上来看，仿佛自己飘起来了，我们称之为脱标了。（给两个兄弟盒子一个设置float另一个不设置float时）

浮动元素的字围现象

字围现象：同级元素中，前面元素如果浮动了，后面标准流会占有前面元素位置。如果后面盒子有文字，不会和盒子一样占有前面盒子的位置，而是绕考浮动元素的位置，围绕着加载，称为字围现象。

<head>

<title>Document</title>

<style>

margin: 0;

padding: 0;

}

.outer{

width: 300px;

height: 300px;

margin: 100px auto;

}

.par{

width: 100px;

height: 100px;

background: pink;

float: left;

}

.box{

width: 200px;

height: 200px;

background: cyan;

}

</style>

</head>

<body>

111文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字

</div>

</body>

我们可以利用字围现象去模仿写一段明星简介：

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<style>

*P{

padding: 0;

margin: 0;

}

div{

width: 600px;

border: 1px solid #000;

margin: 100px auto;

}

div img{

width: 100px;

padding: 8px;

float:right;

}

div p{

text-indent:2em;

}

</style>

<body>

<div>

<p>明凯，1993年7月25日出生于湖北武汉，游戏ID：Clearlove，中国《英雄联盟》电子竞技职业选手，EDG战队打野。 [1]

2012年8月，加入WE战队；同年12月，帮助WE战队在IPL5世界总决赛获得中国LOL首个世界冠军。2014年2月，转会加盟EDG战队；同年5月，帮助EDG战队获得LPL春季赛冠军；同年8月，帮助EDG战队获得LPL夏季赛冠军。2015年4月，帮助EDG战队获得LPL春季赛冠军；同年5月，帮助EDG战队获得英雄联盟季中邀请赛冠军，并被赛事官方评为MVP， [2] 成为中国第一位两次夺得LOL世界冠军的选手。 [3] 2016年8月，帮助EDG战队获得LPL夏季赛冠军。2017年9月，帮助EDG战队获得LPL夏季赛冠军。2019年12月16日，明凯宣布转型为EDG主教练。 [4]

2020年12月14日，明凯宣布重回选手身份。 [1]</p>

<p>1993年7月25日，明凯出生于湖北武汉。 [5] 明凯从小就比较调皮，喜欢玩游戏以及打乒乓球。2005年，就读于武汉市第三十二中学。在初中的时候，因为作业写不好，经常被罚站补作业。初中毕业之后，明凯在朋友的帮助下买了一台8000元的电脑。 [6]

明凯玩的第一款MOBA游戏是《信长野望》。他和其他一些MOBA玩家一起组成了战队，但是最终因为队内分歧而导致战队解散。 [5] 后来，有朋友推荐明凯玩《英雄联盟》。明凯很快迷上这款游戏并从此一发不可收拾。 [6]</p>

<p>

强大的操作和意识以及出色的Gank能力和反野能力，让明凯成为了世界级智商型打野选手。曾多次登顶国服电信一区Rank榜第一，被视为国服最强打野之一。 [64] （新浪游戏评）

清醒的头脑，对于全局节奏的掌控，让明凯成为了名副其实的智商型打野。不论在野区的入侵还是Gank方面都有着自已独特的套路，团战中更是将打团思路发挥的淋漓尽致。 [65] （腾讯游戏评）

如果把明凯比作一把武器的话，那一定是，威力巨大，经典，并且值得让人信赖。每次拔出左轮，那一定是一场赌上性命的决斗。 [6] （LPL官方解说娃娃评）

明凯会利用自己的指挥从以及团战中压制对面优先目标的能力，从游戏最开始就掌控比赛。虽然明凯并不是最强的Gank型选手，但他知道如何引领比赛的节奏，经常会优先照顾下路。 [66] 明凯作为一名食草性打野而闻名，他总是在野区稳步提升装备，同时队伍其他的成员会在游戏中打开局面。但是随着游戏时间的流逝，他的节奏又变得额外不同。如大家所知的，明凯是世界上最好的打野之一，他对运营节奏突然变化的适应使他成为EDG的无价之宝。明凯不但有一个足以让他自豪的巨大英雄池，他还负责在队伍的沟通交流中运筹帷幄，这样的双重威胁使得明凯成为一名可怕的对手。你永远不能猜到他会玩什么英雄，想想他玩蜘蛛女皇时危机四伏的结茧，和玩奥拉夫时气势汹汹的斧子，只有一件事是可以确定的——当面对生死抉择的时候，他总是当机立断。 [67] （拳头游戏官方评）

</p>

</div>

</body>

</html>

效果：