私人博客
许小墨のBlog —— 菜鸡博客直通车
系列文章完整版,配图更多,CSDN博文图片需要手动上传,因此文章配图较少,看不懂的可以去菜鸡博客参考一下配图!
系列文章目录
什么是 BFC?
BFC(Block Formatting Context)格式化上下文,
是Web页面中盒模型布局的CSS渲染模式,指一个独立的渲染区域或者说是一个隔离的独立容器
可以把 BFC 理解为一个封闭的大箱子,箱子内部的元素无论如何翻江倒海,都不会影响到外部
BFC 的布局规则?
- 内部的Box会在垂直方向,一个接一个地放置
- Box垂直方向的距离由
margin
决定。属于同一个BFC的两个相邻Box的margin
会发生重叠(按照最大margin值设置) - 每个元素的margin box的左边, 与包含块border box的左边相接触,即使存在浮动也是如此
- BFC的区域不会与float box重叠
- BFC就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。
- 计算BFC的高度时,浮动元素也参与计算
如何触发 BFC?
- body 根元素
- float的值 不是none
- position的值 不是static或者relative
- overflow的值 不是visible
- display的值 是inline-block、table-cell、flex、table-caption或者inline-flex…
适用解决哪些问题
解决浮动带来的高度塌陷问题
-
方案一
父元素添加overflow:hidden
- 优点:代码简洁
- 缺点:内容增多的时候容易造成不会自动换行导致内容被隐藏掉,无法显示要溢出的元素
-
方案二
使用 after 伪元素清除浮动
.clear::after {
content: '';
display: block;
height:0;
visbility: hidden;
clear: both;
}
.clear {
*zoom: 1;
/* ie6 清除浮动的方式, * 号 只有在IE6 IE7执行,其他浏览器不执行 */
}
- 优点:符合闭合浮动思想,结构语义化正确
- 缺点:ie6-7不支持伪元素:after,使用zoom:1触发hasLayout
- 方案三
使用 before 和 after 双伪元素清除浮动
.clear::after, .clear::before {
content: '';
display: block;
}
.clear::after {
clear: both;
}
.clear {
*zoom: 1;
/* ie6 清除浮动的方式, * 号 只有在IE6 IE7执行,其他浏览器不执行 */
}
- 优点:代码更简洁
- 缺点:用zoom:1触发hasLayout
布局方案(自适应)
窗口自适应:页面中的盒子大小会随着页面的大小的变化发生相应的变化
设置方法
html,body{ height:100%; width:100%; }
引入自动计算大小的函数:calc()
用于动态计算值
calc()
函数支持 “+
”, “-
”, “*
”, “/
” 运算
calc()
函数使用标准的数学运算优先级规则
eg:
width: calc(100% - 200px)
- 方案一:
一侧固定,一侧自适应
- 通过浮动的方法
- 通过定位的方法来设置元素的大小
- 方案二
左右固定,中间自适应
- 通过浮动的方法
- 通过定位的方法来设置元素的大小
- 方案三
圣杯布局(三栏布局)
注
本博文缺失大量图片,严重影响内容完整性以及阅读体验,完整内容请前往本人菜鸡博客——许小墨のBlog