对css中的浮动属性float刨根解牛

时间:2023-03-09 08:48:02
对css中的浮动属性float刨根解牛

1、浮动的框可以向左或向右移动直到它的外边缘碰到包含框或另一个浮动框的边框为止。

脱离常规流,由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。

2、几张图说明浮动常见现象:

对css中的浮动属性float刨根解牛

对css中的浮动属性float刨根解牛

对css中的浮动属性float刨根解牛

差不多就这么多啦,现在知道文字环绕图片的原理了吗?倒数第二张图就是最好的说明,浮动的元素的脱离常规流,使后面的元素和自己重叠,但后面的元素的内容又会从浮动元素的左边开始!!!!!!这就是浮动元素的独特之处,也是和绝对定位(也是脱离常规流)很重要的一个不同之处。

(备注:float在绝对定位和display为none时不会被应用。 )

float虽然在绝对定位元素上是无效的,但可以和相对元素一起使用,效果相对于,先浮动,然后相对定位(所以浮动后的位置还会被占着的)

对css中的浮动属性float刨根解牛