一、浮动案例三
float的兼容性是大于flex布局的，然后flex大于grid布局
一般的公司都不实用浮动了，大公司一般会使用浮动
<!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>
.content {
width:1190px;
margin:0 auto;
background-color:#f00;
height:1000px;
}
.wrapper {
margin-right: -10px;
}
/* 所有item */
.item {
width:290px;
background-color:purple;
margin-bottom: 10px;
float:left;
/* 最后一列加上之后因为宽度不够会跑下来 */
margin-right:10px;
}
.item.left {
height:370px;
}
.item.right {
height:180px;
}
</style>
</head>
<body>
<!-- 京东多列布局 -->
<div class="content">
<div class="wrapper">
<!-- 左边两个，右边四个 -->
<div class="item left"></div>
<div class="item left"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></div>
<div class="item right"></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>
.content {
width:1100px;
margin: 0 auto;
height:800px;
background-color:orange;
}
.box {
border:1px solid #000;
/* box中全部都是浮动的，没有人撑起来 需要设置高度*/
height:168px;
margin-right:-2px;
border-right: none;
}
.item {
width:220px;
height:168px;
float:left;
border-right:1px solid #000;
box-sizing:border-box;
}
</style>
</head>
<body>
<!-- 先来一个固定宽度的东西，然后将他居中显示 -->
<div class="content">
<div class="box">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</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>
.content {
width:1100px;
margin: 0 auto;
height:800px;
background-color:#ccc;
}
.box {
/* margin-left:1px; */
}
.item {
width:221px;
height:168px;
background-color:orange;
color:#fff;
float:left;
border:1px solid #000;
margin-right:-1px;
box-sizing:border-box;
}
.item.first {
width:220px;
}
</style>
</head>
<body>
<!-- 先来一个固定宽度的东西，然后将他居中显示 -->
<div class="content">
<div class="box">
<div class="item first">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
</div>
</div>
</body>
</html>
总结：
边框给谁加
加上边框之后，宽度如何计算
有边框的布局有一些复杂，并且也不好看
三、浮动的问题-高度塌陷
网页中间的装内容的盒子随着内容的增加，而增加
但是因为里面的元素是浮动元素所以不能简单的去除高度由内容添加
红色盒子没有高度而出现塌陷的现象
由于浮动元素脱离了标准流，变成了脱标准流的元素，所以不再向父元素汇报高度
父元素计算总高度的时候，就不会计算浮动子元素的高度了，导致了高度塌陷问题。
解决父元素高度塌陷的问题的过程，一般叫做清浮动（清理浮动，清除浮动）
清浮动的目的是：
让父元素计算总高度的时候，把浮动子元素的高度算进去。
如何清除浮动需要使用clear
如果没有clear也会有其他的解决办法，比如直接计算高度，但是这样写死，扩展性差。
clear属性是用来做什么的呢？
clear属性可以指定一个元素是否必须移动（清除浮动之后）到在它之前的浮动元素下面。
clear的常用取值：
left，要求元素的顶部低于之前生成的所有左浮动元素的底部
right，要求元素的顶部低于之前生成的所有右浮动元素的底部
both，要求元素的顶部低于之前生成的所有浮动元素的底部
none，默认值，无特殊要求。
这里在标准流
中设置了一条线，然后将线从红色盒子中从上拉到浮动元素的下方，导致红色盒子被撑开。
但是这种方式是有问题的，会增加很多没有意义的线
当前是通过CSS产生的浮动问题，然后通过增加HTML元素来解决违背了结构与样式分离的原则
最终的解决方案是通过增加一个伪元素
到时候需要清除浮动直接添加一个class即可
但是会存在一个兼容性的问题
为了兼容性能的问题还需要添加其他的东西
四、布局方案的简单总结
虽然目前浮动布局还没有淘汰但是正在退出历史舞台。
五、Flex布局
Flexbox翻译为弹性盒子：
弹性盒子是一种用于按行或者是按列布局元素的一维布局方法；
元素可以膨胀以填充额外的空间，收缩以适应更小的空间；
通常使用Flexbox来进行布局的方案称之为flex布局(flex layout)
flex布局是目前Web开发中使用最多的布局方案；
flex布局（Flexible布局，弹性布局）；
目前特别是在移动端可以说已经普及；
在pc端已几乎已经普及和使用，只有非常少数的网站依然在使用浮动来布局；
为什么使用flex布局？
长久以来，CSS布局中唯一可靠且跨浏览器兼容的布局工具只有floats和positioning
但是这两种方法本身存在很大的局限性，并且它们用于布局实在是无奈之举。
原来的布局存在的痛点：
在父内容里面垂直居中一块内容。
比如使容器的所有子项等分可用宽度/高度，而不管有多少宽度/高度可用。
比如使用多列布局中的所有列采用相同的高度，即使它们包含的内容量不同。