前端必知必会-CSS布局浮动float

---

CSS 布局 - 浮动和清除

CSS 浮动属性指定元素应如何浮动。

CSS 清除属性指定哪些元素可以浮动在清除元素旁边以及在哪一侧。

浮动属性用于定位和格式化内容，例如让图像在容器中浮动到文本的左侧。

浮动属性可以具有以下值之一：

• left - 元素浮动到其容器的左侧
• right - 元素浮动到其容器的右侧
• none - 元素不浮动（将显示在文本中出现的位置）。这是默认设置
• inherit - 元素继承其父元素的浮动值
  在最简单的用法中，浮动属性可用于将文本环绕在图像周围。

示例 - 浮动：right;
以下示例指定图像应在文本中浮动到右侧：

img { float: right; }

示例 - 浮动：向左；
以下示例指定图像应在文本中浮动到左侧：

img { float: left;}

示例 - 无浮动 在下面的示例中，图像将显示在文本中出现的位置（浮动：无；）：

示例

img {
float: none;
}

示例 - 彼此浮动
通常，div 元素将显示在彼此的顶部。但是，如果我们使用 float: left，我们可以让元素彼此浮动：

示例

div {
float: left;
padding: 15px;
}

.div1 {
background: red;
}

.div2 {
background: yellow;
}

.div3 {
background: green;
}

clear 属性

当我们使用 float 属性时，如果我们希望下一个元素位于下方（不在右侧或左侧），则必须使用 clear 属性。

clear 属性指定浮动元素旁边的元素应发生什么。

clear 属性可以具有以下值之一：

• none - 元素不会被推到左侧或右侧浮动元素下方。这是默认值
• left - 元素被推到左侧浮动元素下方
• right - 元素被推到右侧浮动元素下方
• both - 元素被推到左侧和右侧浮动元素下方
• inherit - 元素从其父元素继承 clear 值
  清除浮动时，应将 clear 与浮动匹配：如果元素浮动到左侧，则应清除到左侧。浮动元素将继续浮动，但清除的元素将出现在网页上其下方。

示例
此示例清除左侧浮动。在这里，这意味着 <div2> 元素被推到左浮动 <div1> 元素下方：

div1 {
float: left;
}

div2 {
clear: left;
}

clearfix 技巧

如果浮动元素比包含元素高，它将“溢出”到其容器之外。然后我们可以添加一个 clearfix 技巧来解决这个问题：

示例

.clearfix {
overflow: auto;
}

只要您能够控制边距和填充（否则您可能会看到滚动条），overflow: auto clearfix 就可以很好地工作。然而，新的现代 clearfix 技巧使用起来更安全，以下代码适用于大多数网页：

示例

.clearfix::after {
content: "";
clear: both;
display: table;
}

---

总结

本文介绍了的CSS布局浮动float使用，如有问题欢迎私信和评论