[分享]css中宽度 高度 浮动的标签

CSS是前端开发中不可或缺的一部分，其中涉及到的标签很多，今天我们就来学习一下CSS中关于宽度、高度和浮动的标签。//width宽度 div { width: 100px; } /height高度/ ...

CSS是前端开发中不可或缺的一部分，其中涉及到的标签很多，今天我们就来学习一下CSS中关于宽度、高度和浮动的标签。

//width宽度
div {
  width: 100px;
}

/*height高度*/
p {
  height: 50px;
}

/*浮动float*/
div {
  float: left;
} 

首先我们来看看宽度和高度的定义标签。width可以控制元素的宽度，可以使用像素值、百分比、em等来控制。同时，如果元素的宽度超过了浏览器的宽度，超出的部分会自动出现滚动条。height控制元素的高度，同样可以使用像素值、百分比、em等来控制。

浮动 (float)属性控制元素是否浮动在其容器的左侧或右侧。浮动元素会“浮动”到其他内容的左侧或右侧。例如，如果您向一张图像应用浮动，则会使文本“浮动”到图像的左侧或右侧。

/*清除浮动*/

.clearfix::after {
  content: "";
  clear: both;
  display: inline-block;
} 

当使用float属性时，我们经常需要清除浮动。清除浮动可以使用clearfix类来达到目的，定义如上所示。

总的来说，CSS中的宽度、高度和浮动标签非常重要，熟练掌握它们可以大大提高开发效率。