Float的原本作用:文字的环绕效果

包裹

  • 收缩
  • 坚挺
  • 隔绝

具有包裹性的有:display: inline-block / table-cell / overflow: hidden…

破坏

破坏表现为父元素高度塌陷
display:none
position:absolute(近亲)/fixed/sticky
但是!浮动使父元素塌陷其实是标准----因为一开始浮动就是为了实现文字环绕效果
所以常说的清除浮动,应该是清除浮动带来的影响

清除浮动

1.HTML block水平元素底部
2.css after 伪元素底部生成
张老师学习笔记
不知道对不对给我这样的感觉,让父盒子有个支撑物就行啦,所以给父元素
.clearfix:after {
content: ‘’;
display: table;
clear:both;
}

也有display:block;好像也可以,不过具体区别我还不知道

无宽度 无图片 无浮动

浮动

  • block化
  • 去空格化

借助浮动实现流体布局

相关文章: