理解CSS浮动：float属性详解-CSDN博客

本文链接：https://blog.csdn.net/u011848617/article/details/76943859

浮动在CSS布局中扮演关键角色，通过float属性实现元素移出正常流并影响周围内容布局。文章探讨了浮动元素的特性，包括文本环绕、外边距不合并以及包含块的概念，通过实例展示了浮动如何改变元素位置和间距。了解这些基础知识有助于提升CSS布局能力。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

浮动在文档布局中是一个非常重要的概念，CSS 允许浮动任何元素。

浮动属性 float

定义

指定元素在哪个方向上浮动。

属性值

left - 元素向左浮动
right - 元素向右浮动
none - 元素不浮动，并且会显示在其在文本中出现的位置
inherit - 从父元素继承属性值

浮动的特性

1. 浮动元素会被从正常文档流中删除，不过还是会影响文档的布局

css:

.float_right {

float: right;

}

html:

When the farmer was old, and felt that his time had come to die, he called the three sons to him and said, <img src="./images/gold.jpg" class="float_right" /> "My sons, there is a pot of gold hidden in the olive orchard. Dig for it, if you wish it."

如代码所示，文本中插入了一个向右浮动的图片，运行效果如下：

可以看出图片出现的位置不是其在文本中声明的位置。不过也是由于图片的浮动，所以其他文本的位置出现了变化。之所以会出现这样的效果，是因为当一个元素浮动时，其他内容会环绕该元素。

2. 浮动元素周围的外边距不会被合并

css:

img {

    margin: 20px;

    width: 300px;

    height: 200px;

}

.float_left {

    float: left;

    border: 1px solid yellow;

}

.control-text {

    margin: 20px;

    border: 1px solid blue;

}

html:

They dug until they had turned up the soil from one end of the orchard to the other, round the tree-roots and between them. But no pot of gold was to be found. It seemed as if someone must have stolen it, or as if the farmer had been wandering in his wits. The three sons were bitterly disappointed to have all their work for nothing.



<img src="./images/labor.jpg" class="float_left" />



 The next olive season, the olive trees in the orchard bore more fruit than they

 had ever given; when it was sold, it gave the sons a whole pot of gold.