[分享]css中float和clear的属性

CSS中的float和clear是两个非常常用的属性，一般用于控制元素的浮动和清除浮动。下面就分别介绍一下这两个属性。

/* float属性 */
.float-left {
  float: left;
}
.float-right {
  float: right;
} 

float属性有两个取值，分别为left和right。当一个元素设置了float:left时，它会向左浮动，不占据行的全部宽度，后面的元素会绕过它。同理，当一个元素设置了float:right时，它会向右浮动，与左侧的元素并排，同样也不占据行的全部宽度。

下面就是一段利用float属性进行页面布局的代码：

/* 页面布局 */
.left-column {
  float: left;
  width: 200px;
}
.right-column {
  float: right;
  width: 200px;
} 

在上述代码中，通过设置两个列元素的float属性和宽度，来实现页面的两列布局。这样可以让页面看起来更加美观，也方便了后续元素的排列。

/* clear属性 */
.clearfix::after {
  content: "";
  display: block;
  clear: both;
} 

clear属性用于清除浮动，避免出现一些预期之外的结果。比如，当一个父元素中子元素设置了float属性后，父元素的高度就会塌陷，不再撑起整个父元素。这时，就需要使用clear属性，来清除浮动，使得父元素可以正常展示。

比如下面这段代码，就是利用clear属性来实现清除浮动的效果：

/* 清除浮动 */
.container {
  width: 1000px;
  margin: 0 auto;
}
.container::after {
  content: "";
  display: block;
  clear: both;
} 

在上述代码中，利用::after伪元素来实现清除浮动的效果，务必记得让该伪元素的content属性设置为空字符串，并将display属性设置为block，否则无法清除浮动。