适合网站开发工程师的公司,图片百度搜索,活动页面图片,程序员项目外包目录 1#xff0c;介绍2#xff0c;BFC布局规则3#xff0c;创建BFC4#xff0c;BFC应用1#xff0c;浮动子元素使父级高度坍塌2#xff0c;非浮动元素被浮动元素覆盖3#xff0c;margin 合并1#xff0c;父子 margin 合并#xff1a;父级和第1个/最后1个子元素2… 目录 1介绍2BFC布局规则3创建BFC4BFC应用1浮动子元素使父级高度坍塌2非浮动元素被浮动元素覆盖3margin 合并1父子 margin 合并父级和第1个/最后1个子元素2相邻兄弟元素的 margin 合并 1介绍
BFC 就是页面上一块独立的容器内部有自己的渲染布局规则。容器内外的元素不会相互影响。
2BFC布局规则
内部的元素在垂直方向上会依次放置。元素在垂直方向上的距离由 margin 决定同一个 BFC 的两个相邻元素的 margin 会重叠。BFC 区域不会和外部浮动元素重叠。计算 BFC 高度时浮动子元素也参与运算。 在标准流中的根元素 html 就是一个天然的 BFC 环境。 3创建BFC
简单介绍下最常用的更多的创建方式参考MDN-BFC。
属性属性值float不为 nonepositionabsolute 或 fixeddisplayinline-block、flow-root、flex、grid、 table 等overflow不为 visible 或 clip 的块级元素
无论哪种方式创建的BFC都有一定的副作用。
只有 display: flow-root 是无副作用的它的行为如同 root在浏览器中是 html 元素。
4BFC应用
1浮动子元素使父级高度坍塌
style.container {border: 2px solid black;}.item {float: left;width: 50px;height: 50px;background-color: salmon;}
/stylebodydiv classcontainerdiv classitem/div/div
/body表现 解决只需要将父元素设置为 BFC 即可。
.container {display: flow-root;
}2非浮动元素被浮动元素覆盖
对于浮动元素的特性来说这是正常现象。
style.box1 {float: left;width: 100px;height: 100px;background-color: rgba(255, 255, 255, 0.75);border: 1px solid black;}.box2 {border: 2px solid red;}
/stylebodydiv classbox1/divdiv classbox2求关注下雪天的夏风/div
/body表现 但我们不想让非浮动元素 box2 被覆盖所以可设置 box2 为 BFC 来解决。
.box2 {display: flow-root;
}上面这种就是经典的两列布局实现方式之一。 3margin 合并
MDN参考
margin 合并的3种情况BFC可以解决前2种
父子 margin 合并父级和第1个/最后1个子元素相邻兄弟元素的 margin 合并空块级元素的 margin 合并
1父子 margin 合并父级和第1个/最后1个子元素
style.container {background-color: skyblue;}.item {margin-top: 50px;width: 50px;height: 50px;background-color: salmon;}
/stylediv求关注下雪天的夏风/div
div classcontainerdiv classitem/div
/div表现父级“掉”下来了 解决方式之一就是将父级设置为 BFC。
.container {display: flow-root;
}2相邻兄弟元素的 margin 合并
style.box {width: 100px;height: 100px;background-color: salmon;}.box1 {margin-bottom: 50px;}.box2 {margin-top: 100px;}
/style
bodydiv classbox box1/divdiv classbox box2/div
/body表现margin 并没有相加而是合并取最大值 解决给其中一个元素增加父级这样就回到了第1种情况。
style.container {display: flow-root;}
/stylediv classbox box1/div
div classcontainerdiv classbox box2/div
/div这里也说明第一种父子 margin 合并还有哪些解决办法bottom 合并同理
父元素设置 border-top父元素设置 padding-top父元素和第一个子元素之间添加内联元素进行间隔。 以上。
