大家好，我是阿赵。继续学习H5。
之前我们学习了很久的CSS写法，知道有一些基础的布局知识，比如块元素是会独占一行，行内元素可以一行显示多个，等。
这些规则我们称为普通流，或者标准流布局。
而除了标准流布局以外，CSS还提供了特殊的布局方式，比如浮动和定位，还有一些移动端的特殊布局方式。
这一篇先来学习一下浮动布局。
一、 浮动的效果
先看例子：
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
border: 1px solid black;
}
#container {
border: 2px solid red;
background-color: yellow;
width: 600px;
height: 150px;
}
.box {
width: 100px;
height: 100px;
}
#box1 {
background-color: red;
float: left;
}
#box2 {
background-color: blue;
float: right;
}
</style>
</head>
<body>
<div id="container">
<div id="box1" class="box"></div>
<div id="box2" class="box"></div>
</div>
</body>
效果：
可以看到，黄色的盒子是父盒子，它是一个标准流的布局，然后在父盒子里面有2个子盒子，分别是红色的box1和蓝色的box2。现在它们的布局形态是，相对于父级盒子，box1是左上角对齐，而box2是右上角对齐。
这种对齐方式，是标准流布局无法做到的。
通过代码可以看到，指定浮动的主要代码就是float属性。
float属性有3个可选值：
1. none
默认值，元素不浮动
2. left
元素向左浮动
3. right
元素向右浮动
二、 浮动的特性
1、 浮动脱离标准流
先看例子：
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
border: 1px solid black;
}
#container {
border: 2px solid red;
background-color: yellow;
width: 600px;
height: 150px;
}
.box {
width: 100px;
height: 100px;
}
#box1 {
background-color: red;
}
#box2 {
background-color: blue;
}
#box3 {
background-color: green;
}
</style>
</head>
<body>
<div id="container">
<div id="box1" class="box">1</div>
<div id="box2" class="box">2</div>
<div id="box3" class="box">3</div>
</div>
</body>
这时候的显示：
由于这时候没有浮动，是标准流布局，所以在container里面，box1-box3这3个盒子根据标准流的排序规则，会每个盒子独占一行显示。
如果这时候，进行修改，把box2改成浮动：
#box2 {
background-color: blue;
float: right;
}
显示会变成这样：
可以看到，box2在它原来应该在的y坐标不变，但x坐标变成了向右对齐。而box3本来应该比box2往下一行显示的，但由于box2不再是标准流，所以也没有独占一行，所以box3就往上移动了。
如果这时候把box1也改成浮动：
#box1 {
background-color: red;
float: right;
}
显示变成了：
由于box1和box2都不再是标准流，所以box3直接就到最上面去了。
而由于box2前面也没有了标准流的box1，所以box2的y坐标也到了最上面去了。
而box1和box2都是向右浮动，那么box1和box2就出现了排序，由于是先写的box1，所以它先往右浮动，然后box2紧接着box1后面往右浮动。
所以可以得出结论：
1. 浮动之后的元素不再保留标准流的占位，后面的元素会取代它原来的位置
2. 如果有多个同时浮动的元素，会按照顺序进行类似行内元素的排序。
3. 由于浮动之后元素不占位置，会导致原来标准流元素的布局混乱，所以原则上同一个父级的一个元素浮动了，其他兄弟元素也要浮动。
2、 浮动的换行
看看这个例子：
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
border: 1px solid black;
}
#container {
border: 2px solid red;
background-color: yellow;
width: 600px;
height: 150px;
}
.box {
width: 100px;
height: 100px;
}
#box1 {
background-color: red;
float: left;
}
</style>
</head>
<body>
<div id="container">
<div id="box1" class="box">1</div>
<div id="box1" class="box">2</div>
<div id="box1" class="box">3</div>
<div id="box1" class="box">4</div>
<div id="box1" class="box">5</div>
<div id="box1" class="box">6</div>
</div>
</body>
显示：
可以看到，如果一行里面摆不下所有的浮动元素，那么将会自动换行
改为右浮动的结果也是一样：
#box1 {
background-color: red;
float: right;
}
显示：
如果左右浮动都有的情况下：
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
border: 1px solid black;
}
#container {
border: 2px solid red;
background-color: yellow;
width: 600px;
height: 150px;
}
.box {
width: 100px;
height: 100px;
}
#box1 {
background-color: red;
float: left;
}
#box2 {
background-color: blue;
float: right;
}
</style>
</head>
<body>
<div id="container">
<div id="box1" class="box">1</div>
<div id="box2" class="box">1</div>
<div id="box1" class="box">2</div>
<div id="box2" class="box">2</div>
<div id="box1" class="box">3</div>
<div id="box1" class="box">4</div>
<div id="box2" class="box">3</div>
<div id="box2" class="box">4</div>
</div>
</body>
它也是按照body里面生成的顺序，逐个去看当前行有没有空位能放得下，如果没有就换行，左右浮动是共用的位置。
3、 浮动一般配合标准流父级使用
先看例子：
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
#title {
width: 600px;
height: 50px;
background-color: yellow;
margin: 0 auto;
text-align: center;
line-height: 50px;
}
#container {
background-color: yellow;
width: 600px;
height: 100px;
margin: 0 auto;
}
.box {
width: 100px;
height: 100px;
}
#box1 {
background-color: red;
width: 40%;
height: 100%;
float: left;
}
#box2 {
background-color: blue;
width: 60%;
height: 100%;
float: right;
}
</style>
</head>
<body>
<div id="title">这是标题</div>
<div id="container">
<div id="box1" class="box">左边内容</div>
<div id="box2" class="box">右边内容</div>
</div>
</body>
显示
这是比较常见的一种布局方式。
其中title和container是标准流的div，做了居中的处理，
然后在container里面，使用浮动做了左右2个盒子，分别通过百分比来占有container盒子的宽度，形成了一个左40%右60%的布局。
三、 清除浮动
先看例子
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
#title {
width: 600px;
height: 50px;
background-color: yellow;
margin: 0 auto;
text-align: center;
line-height: 50px;
}
#container1 {
background-color: yellow;
width: 600px;
margin: 0 auto;
}
#container2 {
background-color: pink;
width: 650px;
height: 200px;
margin: 0 auto;
}
.box {
width: 100px;
height: 100px;
}
#box1 {
background-color: red;
width: 40%;
height: 100px;
float: left;
}
#box2 {
background-color: blue;
width: 60%;
height: 150px;
float: right;
}
</style>
</head>
<body>
<div id="title">这是标题</div>
<div id="container1">
<div id="box1" class="box">左边内容</div>
<div id="box2" class="box">右边内容</div>
</div>
<div id="container2"></div>
</body>
显示：
由于某些原因，container1没有指定height(比如我想container1的高度是以子元素的高度决定)，然后box1和box2是浮动的，导致了container2直接往上移了(为了能看清container2的上边缘，我特意加大了一点它的宽度)。实际上我想得到的效果是，container2是一个新的盒子，是跟随在box1和box2的下面的。
这是我想要的效果：
这个时候，可以通过消除浮动让container1产生高度。方法有多种。
1、 额外标签法
这个做法的原理很简单，在box2后面再加一个盒子，然后指定clear属性，这时候代码会变成这样：
<body>
<div id="title">这是标题</div>
<div id="container1">
<div id="box1" class="box">左边内容</div>
<div id="box2" class="box">右边内容</div>
<div style="clear: both;"></div>
</div>
<div id="container2"></div>
</body>
等于在box2后面和container2之间增加了一个空盒子作为阻挡，所以这种方法也叫做隔墙法。
2、 父级overflow
如果不想增加没必要的盒子，也可以在父级设置overflow属性。这个例子里面就是在container1里面增加属性了：
#container1 {
background-color: yellow;
width: 600px;
margin: 0 auto;
overflow: hidden;
}
父级增加了overflow: hidden;之后，也能达到占位的效果。
3、 伪元素法
这个方法的原理和隔墙法是一样的，在container1的父节点最后面加一个空的盒子。不过之前是手动通过标签增加盒子，这样对Html本身的结构会产生影响。
而伪元素法完全是在CSS里面指定增加一个空盒子，比如：
#container1 {
background-color: yellow;
width: 600px;
margin: 0 auto;
}
#container1:after {
content: "";
display: block;
clear: both;
height: 0;
visibility: hidden;
}
这个:after的意思就是在显示完container1之后，再执行多一个样式。这里面设置了内容是空字符串，然后显示模式是block块元素，clear是both，为了保险起见，再加上了高度为0和可见性是隐藏的设置。
也可以使用双伪元素法，前后都添加空盒子：
#container1:before,
#container1:after {
content: "";
display: block;
}
#container1:after {
clear: both;
}
不过伪元素有个兼容性问题，低版本的IE浏览器，比如IE6~7，是不支持after伪元素的，所以需要增加额外兼容zoom: 1;
#container1:before,
#container1:after {
content: "";
display: block;
}
#container1:after {
clear: both;
}
#container1 {
zoom: 1;
}
四、 浮动间距和层叠
例子：
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
border: 1px solid black;
float: left;
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
</body>
显示：
浮动时相邻的盒子的边框紧邻着，看起来会变粗，如果想均匀的排列，可以把margin设置一个和边框大小一样的负值，比如：
div {
width: 100px;
height: 100px;
border: 1px solid black;
float: left;
margin-left: -1px;
}
现在的显示是：
五、 文字围绕浮动元素
例子：
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 500px;
height: 300px;
margin: 0 auto
}
#pic {
width: 200px;
height: 200px;
background: url(./img/azhao.png);
background-size: cover;
float: left;
</style>
</head>
<body>
<div>
<div id="pic"></div>
<div id="text">HTML5本质上是指一组现代Web技术的流行词汇。这包括HTML动态标准，以及用于增强存储、多媒体和硬件访问的JavaScript
API。HTML5被描述为HTML的新版本。HTML5是以前版本HTML的继任者，引入了新的元素和功能，改进或删除了一些现有功能。 [12]
HTML5是构建Web内容的一种语言描述方式。HTML5是互联网的新一代标准，是构建以及呈现互联网内容的一种语言方式，被认为是互联网的核心技术之一。HTML产生于1990年，1997年HTML4成为互联网标准，并广泛应用于互联网应用的开发。
</div>
</div>
</body>
显示：
原理：
1、 外部是一个大盒子div，里面有2个div，一个div装了图片，一个div装了文字。
2、 其中装图片的div，设置了向左浮动
扫一扫
1228
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
