css中float的用法

float 属性将元素浮动在页面中，与相邻元素并排显示，不会影响常规流式布局。float 值为：left（左浮动）、right（右浮动）、none（清除浮动）。浮动元素影响内容溢出、间距和父容器高度。清除浮动的方法包括：清除属性、浮动元素、overflow: hidden。

CSS 中 float 的用法

float 定义

CSS 中的 float 属性将元素定位在它的内容盒之外，使其浮动在页面中。浮动元素不会影响其他元素的常规流式布局，而是与其相邻的元素并排显示。

float 值

float 属性可以接受以下值：

• left：将元素浮动到容器的左侧。
• right：将元素浮动到容器的右侧。
• none：清除浮动，使元素恢复到正常流式布局。

用法

要浮动元素，请将 float 属性添加到其样式中：

<code class="&lt;a style='color:#f60; text-decoration:underline;' href=" https: target="_blank">css"&gt;element {
  float: left;
}</code>

登录后复制

影响

浮动元素会影响其附近的元素：

• 内容溢出：浮动元素的内容可能会溢出与其相邻的元素。
• 间距：浮动元素和相邻元素之间可能会出现间距。
• 父容器高度：如果浮动元素的高度高于父容器，则父容器的高度将自动调整以容纳浮动元素。

清除浮动

要清除浮动，可以使用以下方法之一：

• 清除属性：将 clear 属性应用于元素，清除其所有浮动元素。
• 浮动元素：在浮动元素后面添加一个浮动元素，将浮动元素清除到新的行。
• overflow: hidden：将 overflow 属性应用于父容器，将浮动元素隐藏在容器中。

实例

下面的代码创建一个带有两个浮动元素的容器：

<code class="html"><p class="container">
  <p class="element1">元素 1</p>
  <p class="element2">元素 2</p>
</p></code>

登录后复制

<code class="css">.container {
  display: flex;
}

.element1 {
  float: left;
  background: red;
  width: 100px;
}

.element2 {
  float: right;
  background: blue;
  width: 100px;
}</code>

登录后复制

输出：

<code>元素 1 | 元素 2</code>

登录后复制

以上就是css中float的用法的详细内容，更多请关注叮当号网其它相关文章！