浮动清除与弹性布局

浮动清除与弹性布局

浮动布局弊端：父元素高度塌陷。

清除浮动方式：

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

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

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

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

.clear:after{

content: “”;

display: block;

clear: both;

}

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

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

弹性布局 display:flex

一、概念：

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

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

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

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

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

常用属性的使用方式：

弹性布局主轴的方向   flex-direction:row

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

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

justify-content: space-evenly;

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

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

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

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

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

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