float浮动现象:
脱离文档流,延迟父容器靠左或靠右进行排列。
float:right / left / none
注意点:
(1)只会影响后面的元素
(2)内容默认提升半层
(3)默认宽根据内容决定
(4)换行排列
(5)主要给块元素添加,但也可以给内联元素添加
如何清除浮动:
一、上下排列时:
采用clear属性,表示清除浮动的
clear:left / right / both
二、嵌套排列:
(1)固定宽高:不推荐,不能把高度固定死,不适合做自适应的效果
(2)父元素浮动:不推荐,因为父容器浮动也会影响到后面的元素
(3)overflow:hidden;(BFC规范),如果有子元素想溢出那么会受到影响
(4)display:inline-block(BFC规范),不推荐,父容器会影响到后面的元素
(5)设置空标签:不推荐,会添加一个标签
(6)after伪类:推荐,是空标签的加强版,目前各大公司这样做 .clear:after{content:"";clear:both;display:block;}