[分享]css两种就算的图

CSS里面有两种非常流行的布局方式，分别是浮动布局和弹性布局。下面我们来详细了解一下这两种布局方式吧。浮动布局浮动布局是CSS中一种非常常用的布局方式。通过使用float属性可以实现元素在一个容器内自...

CSS里面有两种非常流行的布局方式，分别是浮动布局和弹性布局。下面我们来详细了解一下这两种布局方式吧。

浮动布局

浮动布局是CSS中一种非常常用的布局方式。通过使用float属性可以实现元素在一个容器内自左向右或自右向左浮动，同时也支持元素的层叠。

.container{
  width: ***px;
  padding: 20px;
}

.box{
  width: 200px;
  height: 200px;
  float: left;
}

.clearfix{
  clear: both;
} 

以上代码实现了一个将3个宽度为200px的块级元素在一个容器内进行浮动布局的方式，并添加了一个样式为“clearfix”的元素在容器的末尾添加以清除浮动影响。

弹性布局

相对于浮动布局的自由度较低，弹性布局则是更为灵活和自由度更高的一种布局方式。通过使用flex布局和对应的属性，可以非常容易的实现元素的对齐、伸缩等一系列效果。

.container{
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.box{
  flex: 1;
  height: 200px;
  margin: 10px;
} 

以上代码实现了一个弹性布局的呈现，在一个具有flex布局的容器内，使用justify-content属性来控制装载的元素之间的间距，使用align-items属性来控制盒子的垂直间距。另外还可以用flex属性来控制元素的平分比例，比如以上代码为让容器内的3个块级元素平分整个容器的宽度。