高级布局 浮动 清浮动

Posted 2021-01-27 yanhui1995

文档流(normal flow)
# BFC(Block fromatting context):
# 块级格式化上下文,它是一个独立的渲染区域,只有Block-level box参与,它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干.

# BFC规则:
# 1.内部的Box会在垂直方向,一个接一个的放置;
# 2.box自身垂直方向的位置由margin-top决定,属于同一个相邻Box的margin会发生重叠;
# 3.Box自身水平方向的位置由margin左或右决定(具体依据:参照BFC方位),属于同一个BFC的两个相邻Box的margin会发生叠加.

# 浮动布局
# float: 浮动布局,改变BFC的参照方位
# 为什么要使用:使用它,块级盒就会同行显示
# float:left | right; 左|右 浮动
# left : BFC参照方向从左向右
# right : BFC参照方向从右向左
#
# 浮动的区域有父级的width决定

# 清浮动
# 清浮动:
# 浮动问题:子集浮动了,不再撑开父级的高度,那么父级如果拥有兄弟标签,可能会出现布局重叠问题
# 清浮动:解决上面的问题,通过使父级获取一个合适高度,这样子集就不会和父级的兄弟布局发生重叠
#     clear: left|right|both
# 1.设置父级的死高度
# 2.通过兄弟设置 chear:both
# 3.设置父级overflow属性
# .sub{
#     overflow:hidden;
# }
# 4.通过父级:after伪类
# .sup:after{
#     content:"";
#     display:block;
#     clear:both;
# }