float

发表于   |   分类于   |     |   阅读次数

元素设置了浮动，会脱离文档流，按照指定的一个方向移动直到碰到父级的边界或另一个浮动元素

浮动元素特点：

  • 块在一排显示
  • 内联支持宽高
  • 默认内容撑开宽度
  • 脱离文档流（飘起来）
  • 提升层级半级

画一个元素的横切面，大概是这个样子

1

所以下一个元素挤进来只有元素本身进来，元素的内容就被挤出去了

清浮动：

  • 给父级也加浮动
  • 空标签清浮动<br clear=”all” />
  • 父元素设置 overflow:hidden（如果你还要兼顾IE6的话，加上*zoom:1;来触发hasLayout）
  • :after伪元素
    `
    .clearfix:after {
    clear: both;
    content: “.”;
    display: block;
    height: 0;
    visibility: hidden;
    }
    .clearfix {
    *zoom: 1;
    }

`

更多参照：
http://www.zhangxinxu.com/wordpress/?p=583，
https://www.zhihu.com/question/24529373/answer/29135021