css浮动的理解“浮动”是什么概念浮动是指css的属性float。对于设置为浮动的元素，从页面效果上来说，可以通俗的理解为“这个元素是漂浮的（在水面上）”，位置是变化的，并不是按照HTML代码来排列的。从定义上理解，元素是在文档流之外（正常流）。以下是MDN网络文档中对浮动的描述：浮动CSS属性指定元素应位于其容器的左侧或右侧，允许文本和内联元素环绕它。该元素已从网页的正常流中移除，但仍保留部分流（与绝对定位相反）。效果从两张图来看，简单看下面的浮动效果：a是容器中的块级元素，占了一整行（父级的全宽），后面的文字排在它的下面。添加浮动：左；到a，后面的文字会排在a的旁边。浮动对布局的影响从上图例子直观地了解了浮动之后，我们再仔细看看浮动对布局的影响。浮动元素对兄弟元素的影响：当兄弟元素为块级元素时，浮动元素不会影响其布局。块a浮动后，块b仍然占据一整行。从视觉上看，blocka浮动到blockb的上层。当兄弟元素是内联元素时，它的布局会受到浮动元素的影响。把“floatCSS”放在span标签里，发现它的位置和后面的文字一样，被浮动块a“打开”了。浮动元素对父元素的影响当父元素为内联元素时，浮动效果如下：与兄弟内联元素产生相同的效果。所以，在使用浮动的时候，父元素一般不会使用内联元素，以免造成不必要的麻烦。当父元素是块级元素时。我们先来看没有浮动的情况：与加浮动相比，浮动元素对父元素最大的影响是不能“展开”父元素。浮动元素之间的影响对于多个浮动元素（浮动方向相同），布局只是简单的按照元素在HTML代码中的顺序依次放置。这里我想说的是放置的一些规则。blocka,b,c都是左浮动元素，水平顺序排列。当我们尝试将块c的宽度增加到超出父块的限制时，块c将移动到块a和b下方。可以简单理解为a和b所在的“第一行”已经装不下c，所以把c向左（浮动方向）放在“下一行”。这个规则可以大致概括为：换行。这里的“行”这个概念并不是真的指一整行的空间，它是一个抽象的概念。在另一种情况下，我们不增加c的宽度，而是在块c之后添加块d。这会很奇怪。根据上面的归纳，d块不应该放在“下一行”吗？所以，另一个规则：向上移动。但是，简单地向上移动是不准确的。我们看下面的情况：我们可以看到虽然a块下面还有控件，但是d块不会向上移动来填补这部分空隙，而且d块总是在c块下面，也就是上面块d永远不会超过块c的底部边缘。对于向上移动规则的限制，可以说没有超过前面的浮动元素。综上所述，浮动元素的放置规则可以归纳为：在水平方向上，不能一个一个向左（按浮动方向）放置。,尽可能向上移动，但不要超出前一个浮动元素的底部边缘。浮动的应用使用浮动实现布局，例如商品展示页、侧边导航栏等。总的来说，浮动的使用就是改变元素的位置（其实顺序应该更合适），使得它们可以按照我们的意愿放置在页面上，所以浮动在页面的布局中被广泛使用.CSS新增Flex（弹性）布局后，由于操作方便，会选择Flex来实现布局，但浮动应用还是被广泛使用。这取决于我们的需求和我们自己在开发过程中的选择。在整理这些知识之前先多说几句，虽然我知道什么是浮动，但是一直没有统一的总结。自己翻了一下，发现确实有一些细节值得细细推敲。能力和经验有限，理解未必准确。看了网上的相关资料和视频，决定写这篇文章，看看自己是不是真的理解了这个东西。关于浮动，下面总结一下消除浮动影响相关的内容。
