浮动后块级元素和行级元素的变化

首先回忆下影响文档流变化的集中情况

一、文档流

元素脱离文档流可以进行如下设置:position:absolute、position:fixed、和float可以脱离文档流。

position:absolute,绝对定位。即元素脱离文档流,依据第一个定位样式为非static的父容器进行定位,如果父容器都没有设置position,则根据body进行设置;

position:relative,相对定位。元素不脱离文档流,相对于自己原来的位置定位,但是之前的文档流还在,后面的元素直接接着原来的位置排列,忽略偏移后的元素位置

position:fixed,固定定位。即元素脱离文档流,相对于浏览器窗口进行定位。广告位一般用fixed定位,不管滚动条如何滚动,元素始终在原来的位置,不会改变。

二、浮动后行级元素的变化

  1. display属性类似于inline-block,需要注意的是块级元素会默认占满父级的宽度,但是行级元素浮动后,inline-block是不会占满父级宽度的。
  2. 同属一个层级的元素浮动后,它周围的文本会环绕它。可以通过创造BFC取消该现象

三、浮动后块级元素的变化

  1. 和行级元素浮动后的效果一样,也变成类似inline-block的属性了。
  2. 同上

四、父级可以利用BFC特性,使用overflow:hidden触发BFC清除内部的浮动

参考资料:1.深入理解css浮动

# 前端

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×