前言
欢迎来到我的博客
个人主页:北岭敲键盘的荒漠猫-CSDN博客
浮动简单理解与介绍
这是我们普通的页面标签效果。
每个标签从上到下依次排列。
浮动顾名思义就是让这个标签飞翔起来。
他飞起来后，后面的标签来到他的位置上。
而浮动的标签就会显示在标签的上面。
如果多个相邻的标签一起浮动。那么这些浮动的标签就会在一行上排列。
浮动的作用
1.横向排列块型盒子
我们的块标签都是纵向排列的，即使设置了长宽后他们依然是纵向排列。
<style>
.class {
height: 80px;
width: 100px;
}
</style>
</head>
<body>
<div style="background-color: blueviolet;" class="class">1</div>
<div style="background-color: brown;" class="class">2</div>
<div style="background-color: chartreuse;" class="class">3</div>
</body>
我们可以利用浮动来让他们横向排列。
2.制作左右框效果
利用浮动可以很方便的把框给左右两边分布。
3.制作随父标签变化的页面
正常情况下，我们的窗口是不会随页面改变的，浮动可以保证浮动内容显示出来。
浮动的语法
语法: float: 属性值;
属性值:
| 属性 | 作用 |
| none | 不浮动(默认) |
| left | 左浮动 |
| right | 右浮动 |
效果跟上面一样，不演示了。
浮动的特性
添加浮动之后，标签的特性就会改变。
脱标
标准流:就是我们标签默认自己的特性，纵向排列。
直观理解:
其实就是添加浮动后，他就不是他原先的标签了。恕瑞玛飞升了，他原先的位置空出来了，给后面的人了。
直观的看效果吧：
<style>
.class {
height: 200px;
width: 300px;
}
</style>
</head>
<body>
<div style="background-color: blueviolet;" class="class">1</div>
<div style="background-color: brown; height: 100px; width: 200px; float: left;">2</div>
<div style="background-color: chartreuse;" class="class">3</div>
</body>
后面的人继承他的位置。
水平顶端对齐
<style>
.class {
height: 200px;
width: 300px;
float: left;
}
</style>
</head>
<body>
<div style="background-color: blueviolet;" class="class">1</div>
<div style="background-color: brown; height: 100px; width: 200px; float: left;">2</div>
<div style="background-color: chartreuse;" class="class">3</div>
</body>制作苦茶子的形状：
根据父标签自动变化
我们做的这个苦茶子会根据父标签(整个窗口)的变化而变化。
行内块特性
不管你浮动之前是什么类型的标签，浮动之后统一都是行内块标签。
浮动在页面布局中的应用
我们先来分析一下浮动对于布局的优势劣势
优势:
1.可以便捷的进行平行排列。
2.可以进行左右侧控制
3.内容会根据父盒子的状态自主改变。
劣势:
1.默认是在一行中排列。并不能垂直排列。
针对他的优劣势我们想要布局的话，似乎需要解决这个一行排列的问题。
那么我们知道标准流是垂直排列的。
也就是说，我们可以利用垂直排列的特性，来创造盒子，用盒子来进行垂直布局，然后用浮动标签进行盒子内部的布局。
案例演示:
<style>
.mid {
height: 100px;
width: 400px;
margin: 0 auto;
margin-top: 2px;
margin-bottom: 2px;
background-color: palegoldenrod;
}
.flat {
float: right;
width: 20px;
height: 20px;
background-color: black;
margin: 5px 5px;
}
</style>
</head>
<body>
<div style="height: 30px; background-color: palegoldenrod;">
<div style="float: left;" class="flat"></div>
<div class="flat"></div>
<div class="flat"></div>
</div>
<div class="mid"></div>
<div class="mid"></div>
<div class="mid"></div>
<div style="height: 50px; background-color: palegoldenrod;"></div>
</body>
清除浮动
清除浮动的情景：
我们会遇到类似于商品架这样的需求，我们的盒子不会给定高度，而是随着商品的增加而增高。
但是我们明白，浮动的脱标特性会让这个盒子中没有标准流元素，也就是说这个盒子会变成高度为0的情况。
看以下场景：
我先把浮动注释起来
<style>
.flat {
/* float: right; */
width: 60px;
height: 80px;
background-color: black;
margin: 5px 5px;
}
</style>
</head>
<body>
<div style="background-color: palegoldenrod;">
<div class="flat"></div>
<div class="flat"></div>
<div class="flat"></div>
</div>
</body>
我没有设置高度，盒子随着子元素变大而变大。
下面把注释去掉
盒子没了
消除浮动就是针对这种情况产生。
清除浮动的方法
添加额外的块级标签
清除方法:在浮动标签的最后再添加一个标签，这个标签添加清除浮动
clear: both;
缺点：每个需要清除浮动的位置都需要添加这个表情，导致结构比较复杂。
效果：
<div style="background-color: palegoldenrod;">
<div class="flat"></div>
<div class="flat"></div>
<div class="flat"></div>
<div style="clear: both;"></div>
</div>
父元素添加overflow属性
给父元素设置一个overflow属性，属性值使用hidden。
优点:相比于添加额外标签，这个方法很简洁。
缺点:这个属性是隐藏溢出部分的意思，有的盒子一半在外面就会显示异常。
效果
<div style="background-color: palegoldenrod; overflow: hidden;">
<div class="flat"></div>
<div class="flat"></div>
<div class="flat"></div>
</div>
父元素添加伪元素
给父元素添加下面属性
.clearfix::after {
content: "";
display: table;
clear: both;
}原理跟额外标签差不多
<style>
.flat {
float: left;
width: 60px;
height: 80px;
background-color: black;
margin: 5px 5px;
}
.clearfix::after {
content: "";
display: table;
clear: both;
}
</style>
</head>
<body>
<div style="background-color: palegoldenrod;" class="clearfix">
<div class="flat"></div>
<div class="flat"></div>
<div class="flat"></div>
</div>
</body>效果
双伪元素清除浮动
添加这串代码（*zoom有时候会显示异常，看情况加，加上兼容性好）
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
/* 确保IE6-7也能清除浮动 */
.clearfix {
*zoom: 1;
}