浮动+flex布局
一.浮动
1.介绍
2.效果
<style>
.one{
width: 100px;
height: 100px;
background-color: red;
float: left;
}
.two{
width: 200px;
height: 200px;
background-color: blue;
float: right;
}
</style>
</head>
<body>
<div class="one">爱</div>
<div class="two">keadasf</div>
</body>
如果两个都是left，则效果为：
！！！如果只给一个div加float属性的话，会导致两个盒子重叠！！！
例如将.two中的float属性去掉，事实上只有.one才被系统承认
3.特点
顶对齐
具备行内块特点
脱离标准流
父级宽度不够，子级会浮动换行
4.案例
产品区域布局
4.1.效果
4.2代码
<style>
*{
margin: 0;
padding: 0;
}
li{
list-style: none;
}
.product{
margin: 50px auto;
width: 1229px;
height: 628px;
background-color: pink;
}
.left{
width: 234px;
height: 628px;
background-color: red;
float: left;
}
.right{
width: 978px;
height: 628px;
background-color: blue;
float: left;
}
.right li{
margin-bottom: 14px;
margin-right: 14px;
width: 234px;
height: 300px;
background-color: orange;
float: left;
}
.right li:nth-child(4n){
margin-right: 0;
}
</style>
</head>
<body>
<div class="product">
<div class="left"></div>
<div class="right">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</body>
</html>
4.3总结
（1）父级宽度不够，浮动的盒子会掉下来
（2）可以利用无序列表的：nth-child()取消部分盒子的内外边框
（3）版心居中 margin：上下 auto （左右设置为auto即可）
二.清除浮动
1.介绍
<style>
*{
margin: 0;
padding: 0;
}
.product{
margin: 20px auto;
width: 900px;
height: 600px;
background-color: pink;
}
.left{
width: 200px;
height: 600px;
background-color: red;
float: right;
}
.right{
width: 700px;
height: 600px;
background-color: blue;
float: left;
}
.box{
height: 100px;
background-color: black;
}
</style>
</head>
<body>
<div class="product">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="box"></div>
正常情况
当父级product没设置高度时：
product高度化为0，底下的box直接上移，影响布局
2.清除浮动方法
2.1额外标签法
在父元素内容的最后添加一个块元素，并设置CSS属性 clear：both （其中除了both还有left，right指去除xx方向的浮动影响）
.clearfex{
clear: both;
}
........
<div class="product">
<div class="left"></div>
<div class="right"></div>
<div class="clearfex"></div>
</div>
<div class="box"></div>
2.2单伪元素法
.clearfex::after{
content: ""; /*伪元素法必须要有content属性，否则无法生效*/
display: block;
clear: both;
}
..........
<div class="product clearfex"> /*top要调用clearfex*/
<div class="left"></div>
<div class="right"></div>
</div>
<div class="box"></div>
2.3双伪元素法（推荐）
/*其中before是为了解决外边距塌陷问题，子级设置的外边距可能会将父级下拉）*/
.clearfex::before,
.clearfex::after{
content: "";
display: table;
}
.clearfex::after{
clear: both;
}
............
<div class="product clearfex">
<div class="left"></div>
<div class="right"></div>
</div>
<div class="box"></div>
2.4 overflow属性
剪掉超出父级的选项
overflow:hidden
2.5效果
自动撑开高度，高度为子级中最大的高度。
三.flex布局（常用）
1.介绍
2.创建flex容器(display:flex)
.box{
/* 将盒子变为弹性布局 */
display: flex;
justify-content: space-between;
/* 如果去掉height，高度根据内容浮动，不会脱标 */
height: 300px;
border: 1px solid black;
}
关于拉伸和挤压：如果子级设置了宽高，由于较多子级，则自动挤压子级的原有宽度。如果子级没有设置高度，则自动将子级拉伸为与父级盒子同高。
3.主轴对齐 （justify-content）
常用后四个属性值
4.侧轴对齐方式
！！！注意：一个是全部，一个是单独处理
！！！stretch必须不设置弹性盒子的高度才能实现拉伸
！！！控制单个盒子使用伪类选择器：
.box div:nth-child(2){
align-self: center;
}
5.修改主轴方向（flex-direction）
！！！重点记住column，如果主轴方向变化，则侧轴也会跟着变主侧两轴始终垂直
6.弹性伸缩比（flex）
.box div:nth-child(2){
flex: 1;
}
弹性盒子2占父级除13外的尺寸一大份。
.box div:nth-child(2){
flex: 1;
}
.box div:nth-child(3){
flex: 3;
}
除去盒子1，弹性盒子23分别占剩余父级尺寸的1/4和3/4。
7.弹性换行（flex-wrap)
8.弹性行对齐(align-content)
!!!和主轴对齐的属性值相同
！！！弹性行对齐对单行弹性盒子不生效，所以记得换行flex-wrap
四.案例
抖音解决方案
1.效果
2.代码
大体思路为：
1.清除格式
2.大盒子嵌套四个小盒子，四个小盒子可使用无序列表（无序列表属于行标签，记得转换为弹性盒子）
3.设置大盒子：盒子大小，盒子版心位置，边框线，是否圆角等性质。
4.无序列表转弹性盒子，调整各盒子在主轴对齐方式，换行，行对齐方式，内外边距等性质。
5.四个小盒子设置宽高，里面分两个小盒子，一个图片一个文本，转为弹性两个小盒子。
6.设置两个弹性小盒子在主侧轴的分布方式，盒子背景颜色等。
7.单独设置两盒子里面的图片格式和文字大小等性质。
<title>抖音解决方案</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
li{
list-style: none;
}
/*以上为清除格式*/
.box{
margin: 200px auto;
border-radius:20px;
width: 800px;
height: 400px;
border: 2px solid black;
}
.box ul{
display: flex;
justify-content: space-between; /*调整主轴方向对齐方式*/
flex-wrap: wrap; /*弹性盒子换行*/
align-content: space-around; /*行对齐*/
padding: 30px 20px 30px 20px;
height: 400px;
}
.box li{
width: 360px;
height: 150px;
display: flex;
justify-content: center;
align-items: center;
background-color: white;
}
.box .pic1{
margin-right: 15px;
}
.box .text1 h4{
font-size: 18px;
line-height: 30px;
}
.box .text1 p{
font-size: 15px;
color: #666;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li>
<div class="pic1">
<img src="./抖音解决方案1.png" alt="">
</div>
<div class="text1">
<h4>一键发布多域</h4>
<p>发布头条i需要官网确认，比如新闻</p>
</div>
</li>
<li>
<div class="pic1">
<img src="./抖音解决方案2.png" alt="">
</div>
<div class="text1">
<h4>一键发布多域</h4>
<p>发布头条i需要官网确认，比如新闻</p>
</div>
</li>
<li>
<div class="pic1">
<img src="./抖音解决方案3.png" alt="">
</div>
<div class="text1">
<h4>一键发布多域</h4>
<p>发布头条i需要官网确认，比如新闻</p>
</div>
</li>
<li>
<div class="pic1">
<img src="./抖音解决方案4.png" alt="">
</div>
<div class="text1">
<h4>一键发布多域</h4>
<p>发布头条i需要官网确认，比如新闻</p>
</div>
</li>
</ul>
</div>
</body>
