中国建设招投标网站,清远建设局网站,网站后台 生成所有页面,古装衣服店网站建设页面BFC学习
block formatting context 块级格式上下文
简单理解#xff1a;
一个独立容器#xff0c;内部布局不会受到外面的影响
形成条件#xff1a;
1.浮动元素#xff1a;float除none之外的值
2.绝对定位#xff1a;position:absolute,fixed
3.display:inline-blo…BFC学习
block formatting context 块级格式上下文
简单理解
一个独立容器内部布局不会受到外面的影响
形成条件
1.浮动元素float除none之外的值
2.绝对定位position:absolute,fixed
3.display:inline-block,table-cell,table-caption,flex
4.overflow除visible之外的值hidden,auto,sccroll)
5.body根元素
BFC特性
1.内部的盒子会在垂直方向上一个接一个的放置他这里指的是很多个BFC的摆放
2.垂直方向上的距离由margin决定同一个BFC中的两个相邻的标签外边距会发生重叠
前两点其实就是同一个BFC内部盒子和普通外部盒子排列一样也有margin重叠的问题 .float-item {width: 100%;height: 200px;background-color: greenyellow;margin: 20px;}.float-father {overflow: hidden;}div classfloat-fatherdiv classfloat-item1/divdiv classfloat-item2/div/div3.BFC的区域不会与float的元素区域重叠
4.BFC盒子里面与外面互不影响
5.计算 BFC 的高度时浮动元素也参与计算
前两点就是它内部的盒子摆放规则和外面普通盒子一样我们主要利用的是后三点
作用
1 利用BFC避免margin重叠
情景正常情况下父子盒子的margin会发生重叠他会取大的这时我让父盒子变为BFC他们的边距就不会重叠了兄弟盒子也一样他们上下边会取大的我们可以将一个盒子用父盒子包起来给父盒子添加overflow:hidden style* {padding: 0;margin: 0;}.first {background-color: pink;height: 100px;margin-bottom: 20px;}.second {background-color: skyblue;height: 100px;margin-top: 50px;}/stylebodydiv classfirst/divdiv classsecond/div/body给一个盒子包一层并将父盒子变为BFC .father {overflow: hidden;}div classfirst/divdiv classfatherdiv classsecond/div/div避免父子盒子margin重叠 .father {overflow: hidden; /* 让父盒子变为BFC就不会重叠了 */background-color: skyblue;margin-bottom: 20px;}.child {height: 20px;background-color: pink;margin-bottom: 50px;}div classfatherdiv classchild/div/divdiv这是底下的盒子/div2 清除浮动防止盒子塌陷塌陷的原因是父盒子没有高度over:flow能够清除浮动的原因他触发了父盒 子的BFC,由于计算BFC的高度时浮动元素也参与计算
如果子元素是position:absolute,父元素也是坍塌的,父元素overflow:hidden是撑不开的 .float-item {float: left;width: 100%;height: 200px;background-color: greenyellow;}.float-father {overflow: hidden; /* 给父元素变为BFC解决高度坍塌问题不加父盒子高度就撑不开为0了 */}div classfloat-fatherdiv classfloat-item/div/div3 阻止元素被浮动元素所覆盖;让被覆盖的元素成为BFC style.item {font-size: 16px;height: 200px;border: 1px solid red;}.left {float: left;background-color: pink;width: 200px;}.right {background-color: skyblue;width: 360px;display:inline-block /* 将他变为BFC就不会被左侧浮动元素遮挡了 */}/style/headbodydiv classitem left左边的内容 左边的内容 左边的内容 左边的内容 左边的内容 左边的内容左边的内容 左边的内容 左边的内容 左边的内容 左边的内容 左边的内容/divdiv classitem right开始右边的内容右边的内容右边的内容右边的内容右边的内容右边的内容右边的内容右边的内容右边的内容右边的内容右边的内容右边的内容右边的内容右边的内容右边的内容右边的内容右边的内容右边的内容右边的内容右边的内容右边的内容右边的内容右边的内容右边的内容右边的内容右边的内容右边的内容右边的内容右边的内容右边的内容/div右边的元素被左边的所遮挡可以将右边元素变为BFC
