[分享]css3文字和图片浮动

CSS3是最新的CSS版本，它提供了更多文字和图片浮动的样式选择。通过使用这些样式，我们可以轻松地在网页上创建各种美观的布局效果。/ 方式1：文字浮动 / p { float: left; margi...

CSS3是最新的CSS版本，它提供了更多文字和图片浮动的样式选择。通过使用这些样式，我们可以轻松地在网页上创建各种美观的布局效果。

/* 方式1：文字浮动 */
p {
  float: left;
  margin: 20px;
}

/* 方式2：图片浮动 */
img {
  float: right;
  margin: 20px;
}

以上代码展示了两种不同的浮动方式。第一种是文字浮动，我们可以为p元素添加浮动样式，这会将文字移到左侧或右侧。而第二种是图片浮动，我们可以为图片添加浮动样式，使其围绕在文字周围。

另外，我们还可以使用以下CSS3样式来进一步定制我们的浮动效果：

/* 父容器width固定，内容自适应 */
.container {
  width: 80%;
  overflow: auto;
}

/* 子元素等宽，自动换行 */
.item {
  width: calc(33.33% - 40px);
  margin: 20px;
  float: left;
}

/* 清除浮动 */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

以上代码中，我们使用了.container样式来给父容器设置了一个固定的宽度，并使用了overflow属性来确保内容完全显示。另外，我们为子元素添加了等宽样式，使其在每行中均匀分布。最后，我们使用了clearfix样式来清除浮动。

总之，CSS3提供了更多的样式选择，使得文字和图片浮动更加简单方便。我们可以自由地调整布局并实现各种效果。