文章目录
  1. 1. Defined
  2. 2. Main()
    1. 2.1. 对于引言的理解
    2. 2.2. float弊端
    3. 2.3. clear操作对象
    4. 2.4. position 和 float 优先级相关
    5. 2.5. 关于BFC
    6. 2.6. 相关例子
    7. 2.7. 最后
  3. 3. Reference

Defined

本篇写一下前人总结便于自己今后翻阅. clear 称之为闭合浮动

Main()

对于引言的理解

可以把float理解成<float>的闭合标签
根据定义, float:left为, 需要在该元素后面添加一个</float>进行闭合, 从而使其遵循上层的natural flow;
float:right同理, 需要的是<float>, 用伪元素就是container::before.

float弊端

float会导致使用该元素 及其 子元素(一般为inline)脱离natural flow, 导致排版错误.
所以采用clear来保证不会出错.

clear操作对象

操作对象为 自身 ;所以需要注意一下相关伪元素before,after的作用对象应该是自身而不是他的前后.

position 和 float 优先级相关

position: absolute;优先float触发, 即float没有产生效果.

PS: 最近写到一个布局遇到position和display

关于BFC

BFC: block fromatting contexts / flow root(CSS3)

一丝冰凉
BFC的元素就是一个独立的盒子,里面的子元素不会在布局上影响外面的元素

常见BFC创建条件

  • 浮动元素
  • position: absolute | fixed
  • overflow 值不为 visible 的块元素
  • display: inline-block | flex | grid
  • .etc

结合上面两个就能解释为什么overflow: hidden/auto;也可以闭合浮动的原因了.

notice:
正常来说闭合::after即可
::before一般用于消除margin collapsing - 清除浮动 => 创建了BFC => float container内拥有了refer block element, 所以不会出现collapsing现象.

相关例子

Example1:


Example2

最后

顺便提一下兼容性: inline-block: IE8+; flex: IE11+

Reference

优先看 | Clear && BFC - 一丝冰凉
Clear
Position - display - float
easyclearing

文章目录
  1. 1. Defined
  2. 2. Main()
    1. 2.1. 对于引言的理解
    2. 2.2. float弊端
    3. 2.3. clear操作对象
    4. 2.4. position 和 float 优先级相关
    5. 2.5. 关于BFC
    6. 2.6. 相关例子
    7. 2.7. 最后
  3. 3. Reference