高级布局 浮动 清浮动

文档流(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;# }

原文地址：https://www.cnblogs.com/yanhui1995/p/10125579.html