浮动以及相关联的BFC
一:清除浮动的几种方式
- 在子元素的最后添加一个空div设置clear:both以撑开父元素
- 添加::after伪元素content:' ',display:inline-block,clear:both(clear只能作用于block元素,伪元素默认为inline)
- 父元素设置了BFC(块级元素看不到浮动元素)
二:BFC(块级格式化上下文),是一个独立渲染区域,让处于BFC内部元素与外界的元素相隔离,使内外的元素定位不会相互影响(高度塌陷,margin合并)
- 父元素添加border进行隔离
- position: absolute/fixed (把元素转换成display:inline-block)
- display:inline-block/table
- float(把元素转换成display:inline-block)
- overflow != visible