視覺(jué)格式化模型满哪，大體上將頁(yè)面中的盒子的排列分為三種方式：
1、常規(guī)流（行盒汛兜、塊盒）
2巴粪、浮動(dòng)
3、定位
浮動(dòng)應(yīng)用場(chǎng)景
1粥谬、文字環(huán)繞
2肛根、橫向排列
浮動(dòng)的基本特點(diǎn)
修改float屬性值為：
- left：左浮動(dòng)，元素靠左上靠
- right：右浮動(dòng)漏策，元素考上靠右
默認(rèn)值為none
1派哲、當(dāng)一個(gè)元素浮動(dòng)后，元素必定為塊盒(更改display屬性為block)
2哟玷、浮動(dòng)元素的包含塊狮辽，和常規(guī)流一樣一也，為父元素的內(nèi)容盒
盒子尺寸
1、寬度為auto時(shí)喉脖，適應(yīng)內(nèi)容寬度
<!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>
.container {
width: 500px;
height: 500px;
background-color: lightblue;
}
.container div {
height: 100px;
background-color: red;
}
.container .left {
float: left;
}
.container .right{
float: right;
}
</style>
</head>
<body>
<div class="container">
<div class="left">
Lorem ipsum dolor sit amet.
</div>
<div class="right">
Lorem ipsum dolor sit amet.
</div>
</div>
</body>
</html>
image.png
2椰苟、高度為auto時(shí)，與常規(guī)流一致树叽，適應(yīng)內(nèi)容的高度
<!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>
.container {
width: 500px;
height: 500px;
background-color: lightblue;
}
.container div {
background-color: red;
}
.container .left {
float: left;
}
.container .right{
float: right;
}
</style>
</head>
<body>
<div class="container">
<div class="left">
Lorem ipsum dolor sit amet.
</div>
<div class="right">
Lorem ipsum dolor sit amet.
</div>
</div>
</body>
</html>
image.png
3舆蝴、margin為auto時(shí)，為0
4题诵、邊框洁仗、內(nèi)邊距、百分比設(shè)置與常規(guī)流一樣
盒子排列
1性锭、左浮動(dòng)的盒子靠左排列
2赠潦、右浮動(dòng)的盒子靠右排列
<!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>
.container {
width: 1000px;
height: 500px;
background-color: lightblue;
}
.item {
float: left;
margin: 5px;
background-color: red;
}
</style>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
<div class="item">11</div>
<div class="item">12</div>
<div class="item">13</div>
<div class="item">14</div>
<div class="item">15</div>
<div class="item">16</div>
<div class="item">17</div>
<div class="item">18</div>
<div class="item">19</div>
<div class="item">20</div>
</div>
</body>
</html>
image.png
3、浮動(dòng)盒子在包含塊中排列時(shí)草冈，會(huì)避開(kāi)常規(guī)流塊盒
<!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>
.container {
width: 1000px;
height: 500px;
background-color: lightblue;
}
.item {
float: right;
margin: 5px;
background-color: red;
font-size: 2em;
}
.normal {
height: 60px;
background-color: #008c8c;
}
</style>
</head>
<body>
<div class="container">
<div class="normal"></div>
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
<div class="item">11</div>
<div class="item">12</div>
<div class="item">13</div>
<div class="item">14</div>
<div class="item">15</div>
<div class="item">16</div>
<div class="item">17</div>
<div class="item">18</div>
<div class="item">19</div>
<div class="item">20</div>
</div>
</body>
</html>
image.png
4她奥、常規(guī)流塊盒在后面會(huì)被覆蓋
<!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>
.container {
width: 1000px;
height: 500px;
background-color: lightblue;
}
.item {
float: right;
margin: 5px;
background-color: red;
font-size: 2em;
}
.normal {
height: 60px;
background-color: #008c8c;
}
</style>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
<div class="item">11</div>
<div class="item">12</div>
<div class="item">13</div>
<div class="item">14</div>
<div class="item">15</div>
<div class="item">16</div>
<div class="item">17</div>
<div class="item">18</div>
<div class="item">19</div>
<div class="item">20</div>
<div class="normal"></div>
</div>
</body>
</html>
image.png
5、行盒在排列時(shí)怎棱，會(huì)避開(kāi)浮動(dòng)盒子
如果文字沒(méi)有在行盒中哩俭，瀏覽器會(huì)自動(dòng)生成一個(gè)行盒包裹文字
，該行盒叫做匿名行盒拳恋。
高度坍塌
常規(guī)流盒子在計(jì)算高度的時(shí)候不會(huì)計(jì)算浮動(dòng)元素
可以使用clear清除浮動(dòng)來(lái)解決
clear:
- 默認(rèn)值：none
- left:清除左浮動(dòng)該元素必須出現(xiàn)在前面所有左浮動(dòng)的盒子下方
- right： 清除右浮動(dòng)凡资，該元素必須出現(xiàn)在前面所有右浮動(dòng)的盒子下方
- both:清除全部浮動(dòng)，該元素必須出現(xiàn)在前面所有浮動(dòng)的盒子下方
也可以使用偽元素選擇器
.clearfix::after {
content:'',
display:block,
clear:both
}
