CSS基础：盒子模型和浮动

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

CSS盒子模型主要定义了元素的边距，边框，填充以及实际内容的区域，浮动则是CSS布局的一种特性，用于创建多栏布局。




.box {
  width: 300px;
  height: 200px;
  padding: 20px;
  border: 5px solid black;
  margin: 10px;
}




.box {
  width: 300px;
  height: 200px;
  padding: 20px;
  border: 5px solid black;
  margin: 10px;
  box-sizing: border-box;
}




.clearfix::after {
  content: "";
  display: table;
  clear: both;
}




.float-left {
  float: left;
}




.float-right {
  float: right;
}




.clearfix {
  overflow: auto;
  zoom: 1; /* 针对IE6 */
}

以上代码示例展示了如何定义盒子模型的各个部分，以及如何使用float属性进行布局，并通过clearfix类来清除浮动带来的影响。