浮动+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="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>

<ul>

</ul>

</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>

正常情况

当父级product没设置高度时：

product高度化为0，底下的box直接上移，影响布局

2.清除浮动方法

2.1额外标签法

在父元素内容的最后添加一个块元素，并设置CSS属性 clear：both （其中除了both还有left，right指去除xx方向的浮动影响）

.clearfex{

clear: both;

}

........

</div>

2.2单伪元素法

.clearfex::after{

content: ""; /*伪元素法必须要有content属性，否则无法生效*/

display: block;

clear: both;

}

..........

<div class="product clearfex"> /*top要调用clearfex*/

</div>

2.3双伪元素法（推荐）

/*其中before是为了解决外边距塌陷问题，子级设置的外边距可能会将父级下拉）*/

.clearfex::before,

.clearfex::after{

content: "";

display: table;

}

.clearfex::after{

clear: both;

}

............

</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>

<ul>

<li>

</div>

<h4>一键发布多域</h4>

<p>发布头条i需要官网确认，比如新闻</p>

</div>

</li>

<li>

</div>

<h4>一键发布多域</h4>

<p>发布头条i需要官网确认，比如新闻</p>

</div>

</li>

<li>

</div>

<h4>一键发布多域</h4>

<p>发布头条i需要官网确认，比如新闻</p>

</div>

</li>

<li>

</div>

<h4>一键发布多域</h4>

<p>发布头条i需要官网确认，比如新闻</p>

</div>

</li>

</ul>

</div>

</body>