CSS重要属性之float学习心得(分享)

1. 浮动属性的基本概念

float属性是CSS世界中一个重要的属性，它是布局中不可或缺的一部分。通过设置该属性，我们可以使特定元素脱离标准文档流，并向左或向右浮动，使得其他元素可以自动“环绕”该元素。float属性的值可以设置为left、right或none。

1.1 显示属性

浮动元素的显示属性是block。

1.2 “环绕”

在设置了float属性后，其他元素将跑到浮动元素周围，形成“环绕”的效果。需要注意的是，尽管其他元素会“环绕”浮动元素，但块级元素的高度却不会受到浮动元素的影响。

1.3 清除浮动

当使用浮动属性后，容易出现容器高度无法自适应的情况，这时我们可以使用清除浮动来避免问题的出现。清除浮动主要有以下三种方法：

1. 父容器使用overflow属性

.container {
  overflow: auto;
}

1. 使用清除浮动的类clearfix

.clearfix::before,
.clearfix::after {
  content: "";
  display: table;
}
.clearfix::after {
  clear: both;
}
.clearfix {
  *zoom: 1;
}

1. 在容器内部使用clearfix

<div class="container">
  <div class="clearfix">
    <!-- 在这里放置浮动元素 -->
  </div>
</div>

2. 浮动属性的常见应用

2.1 实现文字环绕图片的效果

<div class="container">
  <img src="image.jpg" class="float-left">
  <p>在这里放置文字内容，可以使用一些较长的文章内容，看看效果如何。</p>
</div>

.float-left {
  float: left;
  margin: 0 10px 10px 0;
}

该示例中，我们设置图片浮动到左边，p元素则自动环绕图片在其右侧。

2.2 实现多列布局

<div class="container">
  <div class="left">
    <!-- 左侧内容 -->
  </div>
  <div class="right">
    <!-- 右侧内容 -->
  </div>
  <div class="clear"></div>
</div>

.left {
  width: 70%;
  float: left;
}
.right {
  width: 30%;
  float: right;
}
.clear {
  clear: both;
}

该示例中，我们实现了简单的两列布局，左侧元素宽度为70%，右侧元素宽度为30%，并且它们都浮动到左右两侧。同时，为了清除浮动，我们还在容器底部添加了一行clear元素。

3. 总结

在布局中，float属性是非常重要的，可以用于实现文字环绕图片的效果、多列布局等等。不过，在使用float属性时也需要注意清除浮动，避免容器高度出现问题。