浮动与flex布局

一.标准流：

标准流也叫文档流，指的是标签在页面中默认的排布规则，例如:块元素独占一行，行内

元素可以一行显示多个。

二.浮动-基本使用与布局：

作用：让块级标签在一行显示。

属性名：float

属性值：

·left左对齐

·right右对齐

 

如图浮动后的盒子顶对其；

具有行内块的性质；

浮动的盒子会脱离标准流，不再占用标准流的位置。

 

 如图：one盒子脱离了原来的标准流，所以一个盒子中的块元素都要设置float属性。

产品布局：

三.清除浮动影响：

清除浮动: 清除浮动带来的影响

a.影响: 如果子元素浮动了，此时子元素不能撑开标准流的块级父元素

b.原因: 子元素浮动后脱标-> 不占位置

c.目的: 需要父元素有高度，从而不影响其他元素

d.方法：

i.额外标签法
1.操作:在父元素内容的最后添加一个块级元素，给添加的块级元素设

clear:both(class=“clearfix）

(清除左右两侧的浮动的影响）

2.缺点:会在页面中添加额外的标签，让页面的HTML结构变得复杂

ii单伪元素法：

1.操作: 用伪元素替代额外标签

2.基本写法：

a.

b.解释:伪元素添加的行内，要求块，要加display:block转头块元素。

3.优点: 项目中使用，直接给标签加类即可清除浮动

4.单伪元素法和额外标签法的原理相同

iii.双伪元素清除法

1.操作:

2.优点: 项目中使用，直接给标签加类即可清除浮动

3.clearfix::before作用是解决外边距塌陷问题

iv. 给父元素设置overflow:hidden

1.操作: 直接给父元素设置

2.优点: 方便

 *拓展:浮动本质作用是实现图文混排效果：

四.flex布局-组成：

设置方式：给父元素设置display：flex，子元素可以自动挤压或拉伸。

 

 

组成部分：

弹性容器

弹性盒子（弹性盒子在弹性容器中沿主轴方向排列）

1）当元素过多时，弹性盒子会主动压缩：

 2）当弹性盒子未设置高度时，盒子会自动拉伸：

 

主轴：默认在水平方向。

侧轴/交叉轴：默认在垂直方向。

五.主轴对齐方式：

 六.侧轴对齐方式：

七.修改主轴方向： 

 效果演示：

 

代码：

八.弹性伸缩比：

作用：控制弹性盒子的主轴方向的尺寸。

属性名：flex

属性值：整数数字，表示占用父级剩余尺寸的份数。

注意：在默认情况下，主轴方向的尺寸靠内容撑开，侧轴方向默认拉伸。

九.弹性盒子换行：

弹性盒子可以自动挤压或拉伸，默认情况下，所有盒子都在一行显示。

属性名：flex-wrap

属性值：

wrap：换行

nowrap：不换行（默认）

十.行对齐方式：

属性名：align-content

属性值与主轴对齐方式一样，用于调整行与行之间的对齐方式。