什么是浮动模型
先用代码来展示一下float会出现什么样的效果
<div class="box">
<div class="demo">1</div>
<div class="demo">2</div>
<div class="demo">3</div>
</div>
.box{
border: 1px solid #ccc;
width: 400px;
height: 100px;
}
.demo{
width: 98px;
height: 98px;
background-color: black;
color: #fff;
border: 1px solid #fff;
}
正常情况下，这三个div的布局应该是这样的：
正常的块布局.png
当给box下面的demo加上
float:left; 之后的布局：
float之后的布局.png
可以看到这里的效果就是float的效果了。
浮动属性
float可以去两个属性值：right , left
- 这里的float属性的作用，就是让操作的这一系列或者一个元素站队，比如上面的，当我们设置了
float:left;之后，设置了float属性的元素就会按照先后属性，自左向右的站队，当然==当一行站不下去的时候会换行==，同理当我们使用float:right;的时候，元素会按照先后顺序自右向左的排序。这的先后顺序指的是html结构当中的先后顺序。 - 在浮动的过程当中，可以通过添加margin来调节距离。
- 父级的边界能够多站一个就多站一个，但是站不下的就换行
语法
- 浮动元素产生了浮动流，浮动流对不同的元素的影响是不同的
- 所有产生了浮动流的元素，==块级元素看不到它==
-
产生了bfc的元素和文本类属性
inline-block的元素以及文本元素能够看到它
这两种效果展示一下
<div class="box"></div>
<div class="demo"></div>
.box{
float: left;
background-color: red;
width: 100px;
height: 100px;
}
.demo{
opacity: 1;
width: 100px;
height: 200px;
background-color: black;
}
浮动元素遇见了块级元素.png
很显然，黑色的长方形，好像和红色的不在同一个层面上，想前面移动占位了，所以块级元素看不到浮动元素
当我们给黑色的方块加上
display:inline-block 的时候
inline-block的元素对应的浮动.png
我们会发现，这里的黑色方块能够看到红色方块
当我们使用文字的时候 在浮动元素的后面加上文字
文字对应的浮动元素.png
同样也能看到
当我们在块级元素当中加上文字呢？
浮动元素遇见了块级元素.png
这里还是不行的！！！
浮动流的影响
浮动流有时候会带来一些很不理想的结果，例如下面的，当子元素都设置浮动之后，本来是有子元素撑开的父级元素受到浮动流的影响，撑不开了！
<div class="box">
<div class="demo">1</div>
<div class="demo">2</div>
<div class="demo">3</div>
</div>
.box{
border: 5px solid red;
width: 500px;
}
.demo{
/*float: left;*/
background-color: green;
width: 98px;
height: 98px;
border: 1px solid #fff;
}
当我们注释掉float:left的时候：
正常的.png
但是当我们去掉注释的时候:
受到浮动流影响之后.png
可以看到父级元素看不到子元素了，成了一个没有内容的盒子
清除浮动流
- 在盒子的末尾加上一个
<p></p>清楚浮动流，使用一个专门用来清楚浮动流的属性clear:both该属性还有leftright的属性值，但是一般不用
<div class="box">
<div class="demo">1</div>
<div class="demo">2</div>
<div class="demo">3</div>
<p></p>
</div>
p {
margin: 0;
/*去除p标签默认的margin*/
width: 500px;
height: 5px;
/*这里的p可以height为0的，只有逻辑上它在这里就行了！*/
background-color: orange;
clear: both;
}
image.png
这种额外添加结构的方法是很不理想的，所以这种方法知识理论上面可行的，或者在某种情况下刚好就有一个p标签在它的最后面
- 使用伪元素来实现清除浮动
- 伪元素，确实存在的结构，但是没有结构的元素，权重值是1和tag一样。
伪元素是在元素当中，天生就存在的元素，我们可以通过css选择器选中他们，然后对他们进行一些操作，比较常见的有::after ::before 这两个表示在元素逻辑的最后面和最前面！！！
<span>sheep</span>
span {
color: green;
}
span::before{
content: "so cool sheep";
color: red;
}
span::after {
content: "cool sheep";
color: blue;
}
image.png
可以看到这里的span元素的前面和后面都加上了内容！！！这就是伪元素的效果，当然我们可以通过一些css样式来让伪元素有跟更加好的效果！
这里的::after 刚好可以避免p标签添加无用html结构的缺点了！！！ ==这是我们最常用的方法==
.box::after {
content: ""; // 伪元素独有的属性，这里将伪元素的内容设置为空
display: block; // 伪元素天生就是行级元素，在清楚浮动的时候要改变该属性
clear: both;
}
但是我们的ie6 ie7当中没有伪元素这样的概念怎么办呢？
可以适用触发bfc的方式来清除浮动流，但是这里先介绍一下ie6和ie7当中特有的一个东西--hasLayout，触发hasLayout和触发bfc的效果是很相似的，同样能触发它的方式有很多，这里介绍一种对页面影响较小的一个zoom 属性, ie6 和 ie7当中就可以适用该属性来清除浮动了。
.wrapper {
zoom:1; //视口同比例放大还是缩小，1就是不变
}
但是其他的浏览器并不需要zoom这个属性，这个属性只是为了ie6和ie7准备的，所以这个时候我们需要一点点css hack，我们在zoom前面加一个号， zoom: 1; 这个符号只有ie6和ie7能够识别，其他的浏览器都不识别，这样就可以让只有ie6和ie7去读这一行属性，其他浏览器直接忽略。顺便一提属性前面加上’_**‘之后，就只有ie6可以识别了。_zoom: 1;
- 下面来介绍适用bfc来清楚浮动流
overflow:hiddendisplay: inline-bloclposition: absolute
其实当我们给父级元素.box 设置了float属性之后，同样可以清楚浮动流，这是为什么呢？
==原因是设置了position: absolute; float: left / right 的元素，它们会自动变成inline-block 元素。
<span>我本来是一个行级元素，不能设置宽高</span>
span{
position: absolute;
width: 100px;
height: 100px;
background-color: green;
}
image.png
这里的span能够设置宽高了！
浮动的应用场景
- 报纸类的布局，图片环绕文字的处理（默认情况下，图片和文字是底部对齐）
img {
float: left;
}
- 很多导航栏的样式都是适用ul>li + 浮动实现的 比如淘宝头顶的一个
<ul class = 'nav'>
<li class = "list-item">
<a href = "#">天猫</a>
</li>
<li class = "list-item">
<a href = "#">聚划算</a>
</li>
<li class = "list-item">
<a href = "#">天猫超市</a>
</li>
</ul>
* {
margin: 0;
padding: 0;
list-style: none;
text-decoration: none;
font-family: arial;
}
/*这样的结构我们清除一下浮动流比较好*/
.nav::after{
content: "";
display: block;
clear: both;
}
.nav .list-item{
float: left;
margin: 0 10px;
height: 30px;
line-height: 30px;
}
.nav .list-item a {
color: #f40;
height: 30px;
line-height: 30px;
font-weight: bold;
padding: 10px;
border-radius: 15px; // 圆角属性
}
.nav .list-item a:hover {
color: #fff;
background-color: #f40;
}
image.png
- 使用浮动来实现三栏布局， 两栏布局的原理相同
<div class="left"></div>
<div class="right"></div>
<div class="mid"></div>
<!-- 这里的mid必须在最下面，因为mid是块级元素，独占一行，如果不在最下面的话会把其他的元素挤下去 -->
*{
margin: 0;
padding: 0;
}
.left{
float: left;
width: 100px;
height: 100px;
background-color: red;
}
.right{
float: right;
width: 100px;
height: 100px;
background-color: blue;
}
.mid{
/*空出10px让我们更容易的观察到它*/
margin-left: 110px;
margin-right: 110px;
height: 100px;
background-color: green;
}
image.png
