🌶️第3期第6题:float:left对比position:absolute
Opened this issue · 0 comments
LinDaiDai commented
float:left对比position:absolute
相同点:
- 脱离文档流,也就是将元素从普通的布局排版中拿走,其他盒子在定位的时候,会当做脱离文档流的元素不存在而进行定位。
- 包裹性:也就是都会让元素
inline-block
化。等同于没有高度与宽度的inline-block
元素。- 对于块状元素默认的宽度为
100%
,若设置为了绝对定位则宽度由内容决定 - 对于内联元素原本设置
width
属性无效,若设置了浮动则可以设置width
值
- 对于块状元素默认的宽度为
- 破坏性:都会导致父级高度塌陷。但若是设置了绝对定位的话,其父级即使设置为
float:left;
也还是不能解决高度塌陷的问题。
不同点:
- 虽然它们都会脱离文档流,但是使用
float
脱离文档流时,其他盒子会无视这个元素,但其他盒子内的文本依然会为这个元素让出位置,环绕在周围。而对于使用position:absolute
脱离文档流的元素,其他盒子与其他盒子内的文本都会无视它。