CSS3浮动是什么原理导致的布局效果？

本文共计992个文字，预计阅读时间需要4分钟。

CSS3 悬浮指示的元素会脱离文档流，根据 `float` 的值向左或向右移动，直至外边界碰到父元素的边界或另一个浮动元素的边界为止。浮动会推动元素向左或向右移动，直到周围空间用完。

css3浮动指的是元素会脱离文档的普通流，根据float的值向左或向右移动，直到外边界碰到父元素的内边界或者另一个浮动元素的外边界为止；浮动会使元素向左或者向右移动，其周围的元素也会重新排列。

本教程操作环境：windows10系统、CSS3&&HTML5版本、Dell G3电脑。

css3浮动是什么意思

所谓css浮动就是浮动元素会脱离文档的普通流，根据float的值向左或向右移动，直到它的外边界碰到父元素的内边界或另一个浮动元素的外边界为止。

假如A元素浮动了，原本排在该元素之后的元素发现A元素不在这个文档流了，就会无视它往上接到A元素前面的元素之后(PS:但是文字并不会无视它，还会环绕A元素，也就是A元素没有脱离文字流。

CSS 的 Float（浮动），会使元素向左或向右移动，其周围的元素也会重新排列。Float（浮动），往往是用于图像，但它在布局时一样非常有用。

使用 float 脱离文档流时, 其他盒子会无视这个元素, 但其他盒子内的文本依然会为这个元素让出位置, 环绕在周围(可以说是部分无视)。