BFC
display 属性为 block, list-item, table 的元素,会产生BFC.
大家有么有发现这个三个都是用来布局最为合理的元素,因为他们就是用来可视化布局。
这个BFC 有着具体的布局特性:
有宽度和高度 , 有 外边距margin 有内边距padding 有边框 border。
什么情况下可以让元素产生BFC
以上盒子具有BFC条件了,就是说有资质了,但是怎样触发才会产生BFC,
同样,要给这些元素添加如下属性就可以触发BFC。
-float属性不为none
-position为absolute或fixed
-display为inline-block, table-cell, table-caption, flex, inline-flex
-overflow不为visible。
BFC元素所具有的特性
BFC布局规则特性:
1.在BFC中,盒子从顶端开始垂直地一个接一个地排列.
2.盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻盒子的margin会发生重叠
3.在BFC中,每一个盒子的左外边缘(margin-left)会触碰到容器的左边缘(border-left)(对于从右到左的格式来说,则触碰到右边缘)。
- BFC的区域不会与浮动盒子产生交集,而是紧贴浮动边缘。
- 计算BFC的高度时,自然也会检测浮动或者定位的盒子高度。
它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干。
白话文: 孩子在家里愿意怎么折腾都行,但是出了家门口,你就的乖乖的,不能影响外面的任何人。
BFC的主要用途
BFC能用来做什么?
(1) 清除元素内部浮动
只要把父元素设为BFC就可以清理子元素的浮动了,最常见的用法就是在父元素上设置overflow: hidden样式,对于IE6加上zoom:1就可以了
(2) 解决外边距合并问题
外边距合并的问题。
主要用到
盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻盒子的margin会发生重叠
属于同一个BFC的两个相邻盒子的margin会发生重叠,那么我们创建不属于同一个BFC,就不会发生margin重叠了。
(3) 制作右侧自适应的盒子问题
主要用到
普通流体元素BFC后,为了和浮动元素不产生任何交集,顺着浮动边缘形成自己的封闭上下文 (左右盒子独立)
圣杯结构
浮动、负边距、相对定位、不添加额外标签
圣杯布局
-
将三栏的外包裹层设置左右padding-left和padding-right
-
将左右两个p用相对布局position: relative并分别配合right和left属性,相对自身移动以便不遮挡中间p
效果图
html代码
<div class="body">
<div class="top">
<div class="top-box">
<a href="#" id="top-img1"></a>
<form action="">
<input type="text" placeholder="顶部通栏">
</form>
<a href="#" id="top-img2"></a>
</div>
</div>
<div>
css代码
.body {
min-width: 320px;
max-width: 640px;
margin: 0 auto;
width: 100%;
height: 643px;
/* margin: 0 auto; */
border: 1px solid #d7d7d7;
}
.top {
min-width: 320px;
max-width: 640px;
height: 30px;
margin: 0 auto;
width: 100%;
}
.top-box {
min-width: 320px;
max-width: 640px;
width: 100%;
height: 30px;
position: relative;
}
#top-img1 {
display: inline-block;
width: 30px;
float: left;
height: 30px;
background: url(images/sprites.png) no-repeat -35px 0px /300px 300px;
position: absolute;
}
form {
width: 100%;
height: 25px;
padding: 0px 41px 0px 41px;
border: 1px solid;
border: 0px 0px;
}
form input {
width: 100%;
padding-left: 3px;
height: 25px;
border: none;
outline: none;
}
#top-img2 {
display: inline-block;
width: 30px;
float: right;
height: 30px; right: 0;
top: 0px;
background: url(images/sprites.png) no-repeat -92px 0px /300px 300px;
position: absolute;
}