【CSS】float 浮动

小秀_heo

已于 2023-10-22 21:27:55 修改

阅读量324

点赞数 1

分类专栏： CSS 文章标签： css

于 2023-08-30 12:00:07 首次发布

本文链接：https://blog.csdn.net/XiugongHao/article/details/132579527

版权

43 篇文章 2 订阅

订阅专栏

浮动的主要用途是在一个容器中创建多列布局，以及在文本周围环绕图片等内容。然而，由于现代的 CSS 布局技术的发展，浮动已经不再是主要的布局方法，但了解它仍然是有用的。

下面我将详细解释 CSS 浮动的用法、特性和影响。

在 CSS 中，可以通过设置 float 属性来使元素浮动。元素的 float 属性可以设置为以下值之一：

.float-left {
    float: left;
}

.float-right {
    float: right;
}

浮动元素会影响其他元素的布局和位置。以下是浮动元素的一些主要影响：

环绕效果：浮动元素会让其他内容环绕在它的周围。例如，可以使用浮动来实现图片环绕文字的效果。
破坏正常文档流：浮动的元素会脱离正常的文档流，不再占据原来的空间。这可能导致容器高度坍塌，从而影响布局。由于 float，display 被视为 block 。

一个浮动元素会被移出正常文档流，且其他元素会显示在它的下方。如果我们不想让剩余元素也受到浮动元素的影响，我们需要停止它；这是通过添加 clear 属性实现的。

.cleared {
  clear: left;
}

如果一个父元素包含两个子元素，一个为浮动元素，一个为普通元素，类似于：

在这里插入图片描述
此时，停止第二段文字的元素的浮动并不会使这第二段文字，整体位于上面一整个大的父元素之下。如果你想让盒子联合包住浮动的项目以及第一段文字，同时让紧随其后的内容从盒子中清除浮动，那就需要一些 clearfix 小技巧。

.wrapper::after {
  content: "";
  clear: both;
  display: block;
}

.wrapper {
  background-color: rgb(79, 185, 227);
  padding: 10px;
  color: #fff;
  overflow: auto;
}

.wrapper {
  background-color: rgb(79, 185, 227);
  padding: 10px;
  color: #fff;
  display: flow-root;
}

虽然浮动在过去广泛用于创建多列布局和实现环绕效果，但它也会带来一些问题：

由于浮动存在一些问题，现代的 CSS 布局方法使用了更强大的技术，如 Flexbox 和 CSS Grid。这些方法能够更灵活地创建复杂的布局，避免了浮动可能带来的问题。

总之，浮动虽然在过去被广泛使用，但在现代布局中已经不是首选方法。如果需要创建复杂的多列布局或环绕效果，建议使用 Flexbox 或 CSS Grid 等更现代的布局技术。

关注