css三种传统布局方式，标准流（块元素和行内元素）、浮动（float）、定位（position）。
这三种都是摆放盒子，盒子摆放到合适的位置，布局自然就完成了。
一、为什么需要浮动
三个div放一行？如何实现两个盒子左右排列？
浮动可以改变浮动默认的排列顺序，让其左右排列。
网页布局第一准则：多个块级元素纵向排列找标准流，多个块级元素横向排列找浮动。
网页布局第二准则：先设置盒子大小，再设置盒子位置。
二、浮动特性
float:left/right/none;
1、浮动元素会脱离标准流，移动到指定的位置。
2、浮动盒子不再保留原先的位置。
3、如果多个相邻盒子都设置浮动，多个盒子会在一行内显示并且顶端对齐排列。
注意：浮动的元素是互相贴靠在一起的（无缝隙），如果父级元素装不下，多出的盒子会另起一行对齐。
4、浮动元素具有行内块元素的特点。
任何元素都可以浮动，不管原来是什么模式的元素，添加浮动后都具有行内块元素的相似特性。
例如：块级盒子没有设置宽度，默认宽度和父级一样宽，但是添加浮动后，它的大小根据内容来决定。行内元素同理。
5、浮动元素经常和标准流父级搭配使用。先用标准流父元素排列上下位置，之后内部元素采用浮动排列左右位置，符合网页布局第一原则。
6、如果一个盒子浮动了，那其他兄弟盒子最好也跟着浮动。
7、浮动盒子只会影响浮动盒子后面的标准流，不会影响前面的标准流。
三、最常见的布局方式
1、经典一行内，左右分割布局
<div style=" width: 1000px;height: 200px;blue;margin:0 auto;">
<div style=" width: 300px;height: 200px;gray;float:left;">
</div>
<div style=" width: 700px;height: 200px;yellow;float:right;">
</div>
2、经典一行内，排列多个布局
<ul style="width: 830px;height: 300px;blue;margin: 0 auto;">
<li style="list-style: none;width:200px;height: 300px;yellow;float: left;margin-right: 10px;">1</li>
<li style="list-style: none;width:200px;height: 300px;yellow;float: left;margin-right: 10px;">2</li>
<li style="list-style: none;width:200px;height: 300px;yellow;float: left;margin-right: 10px;">3</li>
<li style="list-style: none;width:200px;height: 300px;yellow;float: left;">4</li>
</ul>
3、经典一行内，排列多行布局
<ul style="width: 880px;height: 500px;blue;margin: 0 auto;">
<li style="list-style: none;width:200px;height: 200px;yellow;float: left;margin-left: 10px;margin-right: 10px;margin-top:5px;">1</li>
<li style="list-style: none;width:200px;height: 200px;yellow;float: left;margin-left: 10px;margin-right: 10px;margin-top:5px;">1</li>
<li style="list-style: none;width:200px;height: 200px;yellow;float: left;margin-left: 10px;margin-right: 10px;margin-top:5px;">1</li>
<li style="list-style: none;width:200px;height: 200px;yellow;float: left;margin-left: 10px;margin-right: 10px;margin-top:5px;">1</li>
<li style="list-style: none;width:200px;height: 200px;yellow;float: left;margin-left: 10px;margin-right: 10px;margin-top:5px;">1</li>
<li style="list-style: none;width:200px;height: 200px;yellow;float: left;margin-left: 10px;margin-right: 10px;margin-top:5px;">1</li>
<li style="list-style: none;width:200px;height: 200px;yellow;float: left;margin-left: 10px;margin-right: 10px;margin-top:5px;">1</li>
<li style="list-style: none;width:200px;height: 200px;yellow;float: left;margin-left: 10px;margin-right: 10px;margin-top:5px;">1</li>
<li style="list-style: none;width:200px;height: 200px;yellow;float: left;margin-left: 10px;margin-right: 10px;margin-top:5px;">1</li>
</ul>
四、清除浮动clear:left/right/both;（常用后三种）
为什么需要清除浮动？
1、父盒子可能不方便设置高度，比如新闻页，淘宝产品页；
2、子盒子有浮动；
3、下面标准流盒子紧跟父盒子，产生错排版，需要清除浮动。
清除浮动后，父级会根据子盒子自动检测高度，就不会影响下面的标准流了。
1、额外标签法（隔墙法）
需要在浮动元素末尾添加一个空的块级元素标签，例如<div style="clear:both;"></div>
优点：通俗易懂。缺点：添加无意义标签，结构化差。
2、overflow:hidden/auto;
子不教，父之过，注意是给父元素添加。
3、伪元素法:after
是额外标签法的升级版，也是给父元素添加类clearfix。优点：没有增加标签，结构更简单。缺点：兼容旧浏览器。
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {/*IE 6 7专用*/
*zoom: 1;
}
4、双伪元素清除浮动（最常用）
是额外标签法的升级版，也是给父元素添加类clearfix。优点：代码简洁明了。缺点：兼容旧浏览器。
.clearfix::before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
参考：https://www.bilibili.com/video/BV14J4114768?p=188
