视觉格式化模型，大体上将页面中的盒子的排列分为三种方式：
1、常规流（行盒、块盒）
2、浮动
3、定位
浮动应用场景
1、文字环绕
2、横向排列
浮动的基本特点
修改float属性值为：
- left：左浮动，元素靠左上靠
- right：右浮动，元素考上靠右
默认值为none
1、当一个元素浮动后，元素必定为块盒(更改display属性为block)
2、浮动元素的包含块，和常规流一样，为父元素的内容盒
盒子尺寸
1、宽度为auto时，适应内容宽度
<!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时，与常规流一致，适应内容的高度
<!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时，为0
4、边框、内边距、百分比设置与常规流一样
盒子排列
1、左浮动的盒子靠左排列
2、右浮动的盒子靠右排列
<!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、浮动盒子在包含块中排列时，会避开常规流块盒
<!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、常规流块盒在后面会被覆盖
<!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、行盒在排列时，会避开浮动盒子
如果文字没有在行盒中，浏览器会自动生成一个行盒包裹文字
，该行盒叫做匿名行盒。
高度坍塌
常规流盒子在计算高度的时候不会计算浮动元素
可以使用clear清除浮动来解决
clear:
- 默认值：none
- left:清除左浮动该元素必须出现在前面所有左浮动的盒子下方
- right： 清除右浮动，该元素必须出现在前面所有右浮动的盒子下方
- both:清除全部浮动，该元素必须出现在前面所有浮动的盒子下方
也可以使用伪元素选择器
.clearfix::after {
content:'',
display:block,
clear:both
}
网友评论