css:浮动
网页的本质上就是摆放盒子，把盒子摆到相应的位置上
css提供了三种传统的布局方式：
普通流（标准流）：标签按默认方式排列，最基本的布局方式
浮动
定位
实际开发中，一个网页基本包含了三种这种布局方式
浮动
按照默认的标签布局方式，div只能占一行，也就是说不能出现两个div在同一行的情况
但是我们学了行内块模式，可以把块转化为行内块
display: inline-block;可以看见虽然在一行，但是块与块的距离没办法调整，实际开发中，我们对横向块分布的距离是要精确到像素的
使用标准流难以让我们的盒子按想要的位置摆放
但是浮动可以，浮动最典型的应用就算让多个块级元素在一行内排列显示
所以我们网页布局的第一准则：多个块级元素纵向排列用标准流，横向排列找浮动
float: left/right/none/inherit;盒子浮动的规则是：
- left - 元素浮动到其容器的左侧
- right - 元素浮动在其容器的右侧
- none - 元素不会浮动（将显示在文本中刚出现的位置）。默认值。
- inherit - 元素继承其父级的 float 值
如果给两个图片都施加left浮动，就会黏在一起
如果对他们施加了圆角边框会这样
如果一个left一个right就会紧挨父容器的左/右
浮动最典型的特性：脱离了标准流的控制。浮动的盒子不再保留原先位置
当菠萝吹雪放在草草的上面的时候，对菠萝吹雪施加float会使菠萝吹雪上浮，菠萝吹雪有了z轴，下面的曹操就会向上移动，占据原来菠萝吹雪的位置，呈现的效果就是和菠萝吹雪叠起来了
但是当草草放在上面的时候，对菠萝吹雪施加浮动，菠萝吹雪是不会向上顶端对齐的，因为他已经脱离标准流了
也就是说并不是所有的浮动都会盖在标准流上面，当标准流还是标准流的时候，它自己独占一行，他后面的浮动不可以盖在它上面；浮动的盒子只会影响后面的标准流，不会影响前面的标准流
一般防止出现这种问题，如果一个盒子里有很多盒子，其中一个盒子浮动了，就应该让剩下的兄弟盒子一起浮动
元素顶部对齐
浮动的元素对齐都是顶端对齐：
按上沿对齐捏
浮动的元素具有行内块的特性
当我们对行内元素施加了浮动以后，这个盒子就具有行内块元素的特性
平常你对span施加宽和高是没有作用的
.x span {
margin-top: 100px;
background-color: aquamarine;
width: 200px;
height: 100px;
}
但是如果给他施加浮动：
.x span {
margin-top: 100px;
background-color: aquamarine;
width: 200px;
height: 100px;
float: left;
}有宽高了！
其他元素也是这样的，如果没有宽的值会继承父亲的宽，但是变成行内块元素以后，就是行内块元素的属性，宽就是内部文字的宽
浮动元素经常和标准流的父级搭配使用
如果我们想要这样的效果怎么做：
可以看到盒子并不像我们写的盒子一样在最左和最右对齐，也不能保证大盒子在中间对齐
但是我们可以把浮动的盒子放在标准流的盒子里，让浮动的盒子在父级内浮动，就可以出现这样的效果了：
.xy {
background-color: azure;
width: 700px;
/* height: 500px; */
margin: 0 auto;
}//把x和y包进同一个盒子里
这样就又可以在正中间，又可以保持和body边框的间距
做个小demo:
放小米官网做排版
妈呀真是de死我了死bug
<!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>
* {
margin: 0;
padding: 0;
}
li {
list-style: none;
}
.box {
width: 1226px;
height: 644px;
background-color: beige;
margin: 0px auto;
overflow: hidden;
}
.box .left {
width: 234px;
height: 460px;
background-color: rgba(105, 101, 101, .6);
float: left;
}
.box .right {
width: 992px;
height: 460px;
background-color: blueviolet;
float: left;
text-align: center;
}
.box .right .png1 {
width: 992px;
height: 460px;
display: block;
}
.box .bottom {
margin-top: 474px;
background-color: cadetblue;
width: 1226px;
height: 170px;
/* float: right */
}
.box .bottom .bottom-l {
width: 234px;
height: 170px;
background-color: blue;
float: left;
}
.box .bottom .bottom-r>div {
width: 316px;
height: 170px;
background-color: gold;
float: right;
display: block;
margin: 0px 10px 0px 0px;
}
.box .bottom .bottom-r>div img {
width: 316px;
height: 170px;
}
.box .bottom .bottom-r .last {
margin-right: 0px;
}
</style>
</head>
<body>
<div class="box">
<div class="left">
</div>
<div class="right">
<img src="027dedf7486746ca8b768923c28b76c5.png" alt="" class="png1">
</div>
<div class="bottom">
<div class="bottom-l"> </div>
<div class="bottom-r">
<div class="last"><img src="1ac77590368ff636d0b4f6a988133f55.png" alt="耳机"></div>
<div><img src="8dede2520f8dfff9c9b690af498cafe8.jpg" alt="电视"></div>
<div><img src="6b67117bc92924fb2ff0e7ad2be86084.png" alt="手机"></div>
</div>
</div>
</div>
</body>
</html>妹写完，就是做了个分区，和浮动的练习
常见网页布局格式
使用标准流父级
对大盒子细分：
做的更细就是这种：
我们尝试布局一下，大概就是：
<!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>
* {
margin: 0;
padding: 0;
.top {
height: 50px;
background-color: grey;
text-align: center;
}
.banner {
width: 980px;
height: 150px;
background-color: grey;
margin: 15px auto;
text-align: center;
}
.box {
width: 980px;
height: 300px;
margin: 0px auto;
background-color: deeppink;
}
.box li {
width: 233.75px;
height: 300px;
background-color: grey;
float: left;
margin-right: 15px;
text-align: center;
}
.box .last {
margin-right: 0px;
}
.footer {
height: 200px;
background-color: grey;
margin-top: 15px;
text-align: center;
}
</style>
</head>
<section></section>
<body>
<div class="top">top</div>
<div class="banner">banner</div>
<div class="box">
<ul>
<li></li>
<li></li>
<li></li>
<li class="last"></li>
</ul>
</div>
<div class="footer">fooer</div>
</body>
</html>
清除浮动
有时候你的页面的父盒子的大小其实不是固定的：在网页里打开不同的文章，盒子的长度和文章的长度相搭配
所以这种情况下我们是不能给父盒子高度的
但是如果不给父盒子高度，又想让子盒子在同一行，就要加浮动
而加了浮动会导致父盒子的高度变为0，下面的标准流再接上来，会影响布局
这时候我们就需要清除浮动
清除浮动的本质是清除浮动元素造成的影响，适用于没给具体高度的父盒子；清除浮动以后，父级会根据浮动的盒子自动检测高度，父级有了高度，就不会影响下面的标准流了
如何清除浮动：
额外标签法也称隔墙法，是w3c推荐的做法
父级添加overflow属性
父级添加after属性
父级添加双伪元素
第一种：额外标签法
在最后一个浮动的元素后面加一个额外的标签（一定要是块级元素，因为行内元素没有高），对这个标签施加clear：both;来控制父盒子的高度既能被撑开，也不会影响下面的标准流
.extern {
clear: both;
}
添加新的子盒子，父盒子也会被自动加长：
优点：通俗易懂，书写方便
缺点：添加了许多无意义的标签，结构化差
第二种：给父元素添加overflow
.box {
overflow: hidden;
width: 980px;
/* height: 300px; */
margin: 0px auto;
background-color: deeppink;
}效果也是一样的
之前我们用这个代码解决了父子元素的塌陷问题
缺点是无法显示溢出父盒子的部分
第三种：after伪元素法
给父盒子起一个类名clearfix，然后施加这个声明
.clearfix::after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
zoom: 1;
}大意是用css施加了一个元素堵在最后面，也是一个额外标签的作用
算是额外标签法的升级版，因为是用css写的，不是用结构写的，所以优于额外标签法
缺点：下面那段代码是需要照顾低版本浏览器的
双伪元素清除浮动
.clearfix::before,
.clearfix::after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}和上面是一个作用，区别是在前面也堵了一个标签，更符合闭合浮动的概念
总结：为什么清除浮动？
父级没有高度
子盒子浮动
影响下面的标准流布局
rz命令我恨你
