1.float定义
- float本意是:文字像流水一样环绕图片。
2.float的特点
3.float常见使用布局
4.float与其他的区别
5.float的注意事项
float和vertical-align共存时,vertical-align失效。
是因为使用float后,元素从网页正常流动中移除,脱离文档流,触发BFC,元素的布局就不会受环境影响了。
6.其他
1.BFC是什么?
- bfc的概念
BFC是一个隔离容器,容器里面的子元素和外面的元素
互不影响
; - bfc的形成
1.根元素
2.float不为none
3.position: absolute,fixed
4.overflow: 不为visiable
5.display:inline-block, table-cell, table-caption, flex, inline-flex - bfc的布局规则
1.内部元素,垂直摆放。
2.同一bfc下的margin重叠
3.每个元素都靠左边或者右边,即便是float元素
4.bfc下不合float box重叠
5. bfc子元素和外面互不影响。
6. 计算bfc高度时,浮动元素也参与计算。 - bfc的常见使用
bfc两栏布局,比浮动+margin撑开相比,不用计算宽度。 (布局规则3和4)
清除内部浮动 (布局规则6)
margin重叠 (布局规则4) - 引用文章:bfc原理详解