css中浮动的原理

CSS中的浮动（float）属性用于将元素从其正常位置移动到其父元素的左侧或右侧，并允许其他内容围绕它。

浮动的原理如下：

1. 首先，元素的浮动属性被设置为left或right。left表示元素向左浮动，right表示元素向右浮动。
2. 当元素浮动后，它会尽量移动到其父元素的左侧或右侧，但不会超出父元素的边界。
3. 元素浮动后，它的位置会相对于正常的文档流改变。其他元素会尝试围绕浮动元素，填充浮动元素周围的空间。
4. 如果浮动元素的高度超过了包含它的父元素，那么父元素的高度会根据浮动元素的高度进行调整，以适应浮动元素。
5. 如果其他元素的高度超过了浮动元素，那么这些元素会出现在浮动元素下方。

需要注意的是，浮动元素不会影响其他非浮动元素的位置，它们只影响其他元素的位置，以便围绕浮动元素布局。