浮动清除与弹性布局

浮动清除与弹性布局
浮动布局弊端：父元素高度塌陷。
https://blog.csdn.net/Victorymh/article/details/95494748
清除浮动方式：

方法一：设置父元素高度（仅仅只适用于知道子元素具体有多高）

方法二：在父元素的最后1个子元素后面添加1个空的div，不需要设置其他任何的样式，只需要设置clear:both;清除左右浮动，让父元素重新计算子元素的高度。
在这里插入图片描述

方法三：最佳清除浮动解决方案，伪元素(:after)解决方案。

这里的clear只是个类名，可以自定义，但为了规范，还是写clear的名字好点

.clear:after{
content: “”;

display: block;

clear: both;

}
在这里插入图片描述

注意：clear类是放置到使用了浮动的父元素上。

================================================================

弹性布局 display:flex
一、概念：

弹性容器：在元素上设置了display：flex；这个样式，那么就为弹性容器。

弹性子元素：弹性容器中的直接子元素就为弹性子元素。

弹性布局主轴：定义是一行内容还是一竖内容。

弹性布局侧轴：主轴的垂直轴。

注意：弹性布局只跟弹性容器里的直接子元素有关。默认是一行内容，不会换行，会按比例进行压缩。

常用属性的使用方式：

弹性布局主轴的方向   flex-direction:row
在这里插入图片描述

===============================

设置弹性子元素在主轴方向的布局分布 (左右)

justify-content: space-evenly;
在这里插入图片描述

===============================

设置弹性子元素侧轴的分布  align-items:center ;（上下）

在这里插入图片描述

===============================

设置允许弹性子元素换行 flex-wrap: wrap;

在这里插入图片描述

===============================

多行内容的侧轴布局 align-content:space-between ;(上下)

在这里插入图片描述