CSS - 浮动
1. 使设置了float的元素脱离标准流（normal flow）的控制，不占位置，float后影响原本标准流的元素的位置。个人理解，标准流为flow 1，float后的流为flow 2，就像PS里面的图层1，图层2
2. 使多个div一行内显示
3. 最早用来控制图片，实现文字环绕图片的效果（如百度百科里面的）
4. 例子1. 加减注释玩一下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
/* float: left;*/
}
.one {
background-color: pink;
/* float: left;*/
}
.two {
width: 110px;
background-color: purple;
float: left;
}
.three {
background-color: skyblue;
float: left;
}
</style>
</head>
<body>
<div class="one"></div>
<div class="two"></div>
<div class="three"></div>
</body>
</html>
5. float可以让元素默认转换为行内块元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
div {
height: 100px;
background-color: pink;
float: left;
/*可以让元素默认转换为行内块元素 特性*/
}
span {
width: 150px;
height: 100px;
/* display: block;*/
background-color: purple;
float: left;
/*妙用 如果已经给 行内元素添加了浮动 此时不需要转换了这个元素也可以有宽高*/
}
</style>
</head>
<body>
<div>div</div>
<span>I am span</span>
</body>
</html>
6. 浮动的目的就是为了让多个块级元素同一行上显示。 最核心的关键点就是 怎么排列的， 是否占有位置
7. 清除浮动方法1，clear:both
- 清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0的问题。
- 由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响，为了解决这些问题，此时就需要在该元素中清除浮动。
- 准确地说，并不是清除浮动，而是清除浮动后造成的影响
- clear:both div的左侧和右侧均不允许出现浮动元素(同时清除左右两侧浮动的影响)，且父级元素的高度为已经float的子元素高度的最大值，不会为0.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.father {
border: 1px solid red;
width: 300px;
}
.big {
width: 100px;
height: 200px;
background-color: purple;
float: left;
}
.small {
width: 80px;
height: 80px;
background-color: darkcyan;
float: left;
}
.footer {
width: 400px;
height: 100px;
background-color: pink;
}
.clear {
clear: both;
/*如果清除了浮动， 父亲去自动检测孩子的高度 以最高的为准*/
}
</style>
</head>
<body>
<div class="father">
<div class="big"></div>
<div class="small"></div>
<div class="clear"></div> <!-- 最后一个浮动标签的后，新添加一个标签 清除浮动 -->
</div>
<div class="footer"></div>
</body>
</html>
不清除浮动，注释掉clear:both，div.father的高度变为0，因为两个儿子都float了，原本的标准流只剩下father.
清除浮动，father保持了两个儿子浮动前被两个儿子撑开的高度
8. 清除浮动方法2，父级添加overflow属性方法
可以通过触发BFC的方式，可以实现清除浮动效果
原理：https://www.zhihu.com/question/30938856
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.father {
border: 1px solid red;
width: 300px;
overflow: hidden; /*别加错位置了，给父亲加*/
/*不是所有的浮动我们都需要清除 ，谁影响布局，我们清除谁*/
}
.big {
width: 100px;
height: 100px;
background-color: purple;
float: left;
}
.small {
width: 80px;
height: 180px;
background-color: blue;
float: left;
}
.footer {
width: 400px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="father">
<div class="big"></div>
<div class="small"></div>
</div>
<div class="footer"></div>
</body>
</html>
优点： 代码简洁
缺点： 内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。
9. 清除浮动方法3，使用after伪类清除浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.clearfix:after { /*正常浏览器 清除浮动*/
content:"";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
/* *zoom: 1; zoom 1 就是ie6 清除浮动方式 * ie7一下的版本所识别*/
}
.father {
border: 1px solid red;
width: 300px;
}
.big {
width: 100px;
height: 100px;
background-color: purple;
float: left;
}
.small {
width: 80px;
height: 80px;
background-color: blue;
float: left;
}
.footer {
width: 400px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="father clearfix">
<div class="big"></div>
<div class="small"></div>
</div>
<div class="footer"></div>
</body>
</html>
优点： 符合闭合浮动思想 结构语义化正确
缺点： 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。
代表网站： 百度、淘宝网、网易等
10. 清除浮动方法3，使用before和after双伪类清除浮动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.clearfix:before, .clearfix:after {
content: "";
display: table;
/* 这句话可以触发BFC,BFC可以清除浮动*/
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
.father {
border: 1px solid red;
width: 300px;
}
.big {
width: 100px;
height: 100px;
background-color: purple;
float: left;
}
.small {
width: 80px;
height: 80px;
background-color: blue;
float: left;
}
.footer {
width: 400px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="father clearfix">
<div class="big"></div>
<div class="small"></div>
</div>
<div class="footer"></div>
</body>
</html>
优点： 代码更简洁
缺点： 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。
代表网站： 小米、腾讯等
注意
浮动布局已经不建议
参考https://stackoverflow.com/a/8554054/5955399
