CSS3 布局模型+CSS3 浮动

作者：System 时间：2024年08月15日分类：所有,css3 字数：590

CSS3 并没有一个正式的“布局模型”，但是CSS3引入了一些新的布局特性，比如Flexbox和Grid。这些布局特性可以用来创建更加灵活和强大的布局。

Flexbox布局模型提供了一种新的方式来布置容器内的项目，可以用来创建弹性布局。




.container {
  display: flex; /* 或者 inline-flex */
}

Grid布局模型是一个基于网格的二维布局系统，它使得我们能够创建更为复杂的布局。




.container {
  display: grid;
  grid-template-columns: 100px 200px auto;
  grid-template-rows: 100px 200px auto;
}

至于CSS3的浮动，可以使用float属性来实现文本环绕图像的效果。




img {
  float: left; /* 图像会浮动到左边，文本会环绕它 */
}

注意：CSS3的浮动并不是用来创建复杂的布局系统的，它主要是用来实现文字环绕图片的效果。如果你需要创建更复杂的布局，应该优先考虑使用Flexbox或Grid布局模型。