BFC是块级格式化上下文,属于定位方案中的普通流(定位方案包括普通流、绝对定位、浮动)
- body 根元素
- 浮动元素:float 除 none 以外的值
- 绝对定位元素:position (absolute、fixed)
- display 为 inline-block、table-cells、flex
- overflow 除了 visible 以外的值 (hidden、auto、scroll)
- 同一个BFC下的元素,外边距margin会产生重叠;
- BFC可以包含浮动的元素(清除浮动);
- BFC可以防止元素被浮动元素覆盖【可以用来实现两列自适应】
很多都用overflow:hidden实现
负margin产生的影响
- 当元素是浮动元素时,负margin会改变元素的显示位置
- 当元素不存在width属性或者width:auto时,负margin会增加元素的宽度。(可以通过这个来去掉列表右边框)【margin-top为负值不会增加高度,只会产生向上位移;margin-bottom为负值不会产生位移,只会减少自身的供css读取的高度】
- 设置多列不知道高度的等高布局。对每一列都设置padding-bottom:1000px;margin-bottom:-1000px;对于父元素来说,他还是原来的高度,然后给父元素加上overflow:hidden;以最高的高度进行裁切
双飞翼布局
1.首先把left、middle、right设置成float:left;脱离文档流;
2.给container设置overflow:hidden;形成BFC撑开文档;
3.设置middle宽度100%,left宽度leftwidth,right宽度rightwidth,(div中设置middle在最前面)
4.设置container的padding-left和padding-right分别为left与right的宽度,为两个腾地;
5.使left爬升至第一行:如果设置margin-left:-leftwidth,那么left会在middle的后半部分,要想left在middle的开头,设置margin-left:-100%;
6.使right爬升至第一行:margin-right:-rightwidth;
7.使right和left分别在container为他俩腾的地方,设置绝对定位,如对left设置position:relative;right:leftwidth;对right设置position:relative;left:rightwidth;
margin-left设置百分比是相对于父元素宽度的,这个宽度是不包括padding在内的。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>圣杯布局</title>
<style>
.header{
background-color: green;
}
.container {
padding-left: 200px;
padding-right: 150px;
overflow: hidden;
}
.container .left {
background-color: red;
float:left;
width:200px;
margin-left:-100%;
position:relative