网页的本质上就是摆放盒子，把盒子摆到相应的位置上
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命令我恨你
![[STM32] 定时器应用之输出比较 (五)](https://i-blog.csdnimg.cn/direct/7b0de662866041cdb84fa5aa77723d53.png)
