连BFC都不知道谈什么前端工程师
BFC(块级格式化上下文)
BFC是个独立的渲染区域,只有块级盒子参与,它规定了内部的盒子如何布局,但不会影响外部盒子
简单的说 它就是一块封闭的区域,里面的盒子在怎么动也不会影响外面的布局。 创建BFC也有条件 只有display属性为 block
,list-item
,table
的元素才能创建BFC BFC有宽度,高度。有外边距margin,有内边距外边框
BFC的特性
1.在BFC中,盒子从顶端开始垂直地一个接一个地排列
2.盒子垂直方向的距离由margin决定,在同一个BFC区域的两个相邻盒子的margin会发生重叠 如下margin重叠
.father{
width:500px;
height:300px;
background: skyblue;
}
.son1{
width:100px;
height:50px;
background: red;
margin-bottom:100px;
}
.son2{
width:100px;
height:50px;
background: blue;
margin-top: 50px;
}
//
<div class='father'>
<div class='son1'></div>
<div class='son2'></div>
</div>
我们将son盒子放到father盒子中,并设置son1盒子下边距为100px;son2盒子上边距为50px 我们没有设置浮动,那么他们之间的边距应该是100px+50px对吧?
浏览器显示结果并不是这样,他们之间的边距实际上只有100像素,这就是典型的边距重叠,如何解决这种问题?第一,尽量避免这种情况,像这种情况直接把边距给一个盒子即可 第二,既然这种问题是有BFC引起的,通过BFC的特性我们知道,在同一BFC区域的连个相邻盒子会发生边距重叠,那我们不让这两个盒子在同一个BFC区域不就行了吗?
.bfc{
overflow: hidden;
}
<div class='father'>
<div class='bfc'>
//单独BFC区域
<div class='son1'></div>
</div>
<div class='son2'></div>
</div>
这里我们将son1盒子放置在bfc盒子中,并设置bfc盒子overflow:hidden
添加这个属性的目的并不是想隐藏超出的内容,而是通过这个属性创建BFC区域(下面会讲到) 浏览器在查看
解决了之前的边距重叠问题。 3.在BFC中每一个盒子的左外边缘(margin-left)会触碰到容器的左边缘(border-left)(对于从右到左的格式来说,则触碰到最右边缘) 意思就是子盒子设置边距是从父元素的border开始的。
4.BFC区域不会与浮动盒子产生交集,而是紧贴浮动边缘,自适应 意思就是BFC区域的盒子不会和浮动的盒子连在一起,如下
.father{
width:300px;
height:200px;
background: skyblue;
float: left;
}
.txt{
width:400px;
height:300px;
background: red;
}
//结构
<div class='father'></div>
<div class='txt'>
文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章文章
</div>
father盒子设置左浮动,txt是一篇文章盒子
由图可见,文章盒子与蓝色盒子重合在一起了导致我们的文章显示不正常,因为蓝色盒子设置了左浮动,对于这种解决办法就是给文章盒子创建BFC区域,我们给文章盒子加上overflow
属性 正常显示
5.计算BFC的高度时,自然也会检测浮动的盒子高度 这个在上一篇CSS清除浮动我们讲到,给元素添加overflow
属性(创建BFC)也可清除浮动 至于BFC为什么能清除浮动就是因为他的第五个特性。
怎样触发BFC 1.添加float属性,且值不能为visible 2.position为absolute或fixed 3.display为inline-block,table-cell,table-caption,flex,inline-flex 4.添加overflow不为visible 5 .元素根 6.float属性不为none
BFC 的 1.解决用途 2. 解决外接周边设备合并的问题 3. 制作芯片的清除问题
相关文章
- 数据透视表上线!如何在纯前端实现这个强大的数据分析功能?
- 12·灵魂前端工程师养成-CSS定位
- 36·灵魂前端工程师养成-[前后分离]AJAX实战Cookie、Session
- 大数据应用开发工程师,主要负责的工作内容有哪些?
- 最受工程师欢迎的10款SSH远程连接工具
- 2年后芯片产能面临过剩,对于IC企业的影响,工程师又该如何应对?
- 前端工程师彻底征服树结构组件的秘籍
- 万字启程——零基础~前端工程师_养成之路001篇
- 前端工程师面试题自检篇(一)
- 32·灵魂前端工程师养成-[前后分离]AJAX原理及JSON详解
- 前端工程师leetcode算法面试必备-二分搜索算法(中)
- java工程师需要掌握的技能_java软件工程师需要学什么
- 前端工程师leetcode算法面试必备-二分搜索算法(中)
- 前端工程师leetcode算法面试之二分搜索算法(下)
- 前端工程师leetcode算法面试之二叉树深度广度遍历
- 前端工程师leetcode算法面试必备---二分搜索算法(下)
- 沪漂日记 | 15. 不懂设计的芯片验证工程师走不远
- 网络工程师笔记——SSL、 HTTPS
- 基础算法才是王道!谷歌2022年终总结第五弹:真正的「算法工程师」都在研究啥?
- 对话声网视频算法工程师郑林儒:视频质量评价方法的最优解
- Linux软件工程师:令人向往的薪资待遇(linux软件工程师待遇)
- Linux工程师面试:探索极限可能性(linux工程师面试)
- 《30天打造安全工程师》第13天:80端口攻击总结
- 实战不可缺!探究Linux运维工程师培训的重要性(linux运维工程师培训)