CSS float 属性

CSS Float属性

CSS浮动属性是CSS中最重要的布局属性之一。它使得元素脱离文档流并沿着页面流动，让开发者能够方便地实现一些复杂的布局效果。

语法

float: none | left | right | inherit;

none：默认值，元素不浮动。
left：元素向左浮动。
right：元素向右浮动。
inherit：继承父元素的 float 属性。

注意事项

浮动的元素不再占据原来的位置，所以在页面中会出现问题，造成布局混乱。这时，可以使用 clear 属性解决问题。

clear: none | left | right | both | inherit;

none：默认值，元素可以和其他浮动元素共同排列。
left：元素下方不能有左浮动的元素。
right：元素下方不能有右浮动的元素。
both：元素下方不能有左右浮动的元素。
inherit：继承父元素的 clear 属性。

注意事项

父元素浮动，不会导致子元素浮动。
父元素没有设置高度，子元素设置浮动属性后父元素会塌陷，这时可以使用清除浮动技巧解决问题。

.clearfix::before,
.clearfix::after {
  content: '';
  display: table;
}

.clearfix::after {
  clear: both;
}

.clearfix {
  *zoom: 1;
}

案例分析

下面是一个利用float属性实现多列布局的案例：

<div class="container">
  <div class="item">item 1</div>
  <div class="item">item 2</div>
  <div class="item">item 3</div>
  <div class="item">item 4</div>
  <div class="item">item 5</div>
  <div class="item">item 6</div>
</div>

.container {
  width: 800px;
  margin: 0 auto;
  overflow: hidden;
}

.item {
  width: 200px;
  height: 200px;
  float: left;
  background-color: #e0e0e0;
  margin-right: 20px;
}

该案例中，将容器元素设置了固定的宽度并使用margin进行居中处理，然后将子元素设置了相同的宽度和高度，并设置了float属性为left，使其两个为一行并排显示。最后设置了margin-right属性为20px，用来设置两列之间的间距。

总结

CSS浮动属性是实现页面布局和样式的重要手段。但使用浮动属性时，需要注意清除浮动和父元素塌陷的问题。在实践应用中需要谨慎使用，尽量减少它们的使用频率，保持页面良好的结构与性能。

CSS flex-wrap 属性 CSS font 属性