浮动布局

浮动布局

float：浮动布局，改变BFC的参照方位，

为什么要使用：使用它，块级盒子就会同行显示。

float: left | right;  左 | 右 浮动
/*left: BFC参照方向从左向右*/
/*right: BFC参照方向从右向左*/

 浮动的区域有父级的width决定。

清浮动

清浮动：子级浮动，不在撑开父级的高度，那么父级存在兄弟标签，可能就会出现布局重叠问题。

清浮动：就是为了解决上面问题，通过使父级获取上一个合适的高度，这样子级就不会和父级的兄弟布局发生重叠。

清浮动方式：

1.设置父级块固定高度。

2.通过父级兄弟标签设置取消浮动，clear:both;

3.设置父级overflow属性

.sup{overflow:hidden;
}

 

4.设置父级:after伪类

.sup{
  content:""  ;
  display:block;clear:both;  
}

 

转载于:https://www.cnblogs.com/msj513/p/10104458.html