世界杯梦幻阵容css浮动与定位

以下是一个简单的世界杯梦幻阵容的HTML和CSS代码，其中使用了CSS浮动和定位来实现布局效果：

HTML代码：

<div class="team">
  <div class="player">
    <img src="player1.jpg">
    <div class="name">Cristiano Ronaldo</div>
  </div>
  <div class="player">
    <img src="player2.jpg">
    <div class="name">Lionel Messi</div>
  </div>
  <div class="player">
    <img src="player3.jpg">
    <div class="name">Neymar Jr</div>
  </div>
  <div class="player">
    <img src="player4.jpg">
    <div class="name">Kylian Mbappé</div>
  </div>
  <div class="player">
    <img src="player5.jpg">
    <div class="name">Luka Modrić</div>
  </div>
  <div class="clear"></div>
</div>

CSS代码：

.team {
  width: 600px;
  margin: 0 auto;
}
.player {
  width: 150px;
  float: left;
  text-align: center;
}
.player img {
  width: 100%;
}
.name {
  background: #333;
  color: #fff;
  padding: 5px;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
}
.clear {
  clear: both;
}

上面的代码实现了一个横向排列的球员阵容，每个球员包含一个图片和一个名字，名字在图片的底部居中显示。其中，使用了float属性让球员元素左浮动，使得球员可以横向排列。使用了position:absolute属性将名字元素绝对定位到图片的底部，并使用了bottom、left和right属性将名字水平居中对齐。最后，使用了clear:both属性清除浮动，使得父容器可以正确计算高度。