CSS布局总结--BFC
2018-10-30 本文已影响0人
kim_jin
小知识点（暖场）：
overflow属性：规定当内容溢出元素框时发生的事情。
-
visible:默认值，内容不会被裁减，但是会显示在元素框外 -
hidden：内容会被裁减，其他的内容是不可见的 -
scroll：内容会被裁减，但是浏览器可以显示滚动条来显示余下的内容 -
auto：如果内容被裁减，浏览器会显示滚动条来方便查看余下的内容 -
inherit：规定应该从父元素继承overflow属性的值
display属性：规定元素应该生成框的类型
-
none：此元素不会被显示 -
block：此元素显示为块级元素，元素后面默认有换行符 -
inline：默认。此元素会被显示为行内元素，元素后默认 -
list-item：此元素作为列表显示 -
run-in：此元素会根据上下文作为块级元素或是行内元素显示 -
compact：css值中有compact，不过由于缺乏广泛支持，已删除 -
marker：css值中有marker，不过由于缺乏广泛支持，已删除 -
table：此元素会作为块级表格来显示，表格的前后会带有换行符，类似<table>
-inline-table：此元素会作为内联表格显示，表格前后没有换行符，类似<table> -
table-row-group：此元素会作为一个或是多个分组来显示,类似<tbody> -
table-header-group: 此元素会作为一个或多个行的分组来显示,类似<thead> -
table-footer-group:此元素会作为一个或多个行的分组来显,类似<tfoot> -
table-row：此元素会作为一个表格行显示，类似<tr> -
table-column-group：此元素会作为一个或多个列的分组来显，类似<colgroup> -
table-column：此元素会作为一个单元格列显示，类似<col> -
table-cell：此元素会作为一个表格单元格显示，类似<td>和<th> -
table-caption：此元素会作为一个表格标题显示，类似<caption> -
inherit：规定应该从父元素继承display属性的值。
position属性：属性规定元素的定位类型
-
absolute：生成绝对定位，相对于static定位以外的第一个父元素进行定位，元素位置通过left、right、top、bottom属性进行规定 -
fixed：生成绝对定位的元素，相对浏览器的窗口进行定位，元素位置通过left、right、top、bottom属性进行规定 -
relative：生成相对定位的元素，相对于其正常位置进行定位，因此left：20会向元素的左边添加20像素 -
static：默认值，没有定位，元素出现在正常流中（忽略top等属性） -
inherit：规定从父级继承的position的位置
BFC简介
BFC：块级格式化上下文，它是指一个独立的块级渲染区域，只有Block-level 盒子参与，该区域拥有一套渲染规则来约束块级盒子的布局，且与区域外部无关。
BFC的生成
对于HTML文件来说，只要满足下面CSS声明中的一个就会产生BFC
- 为根元素
-
float的值不为none -
overflow值不为visible -
display的值为inline-block、table-cell、table-caption -
position的值为fixed、absolute
创建BFC的约束
- 生成
BFC元素的子元素会一个接一个的进行放置。垂直方向上他们的奇点是一个包含块的顶部，两个相邻子元素之间的垂直距离取决于margin特性，在BFC中相邻的块级元素的外边距会重叠 - 生成
BFC元素的子元素中，每一个子元素做外边距与包含块的左边界相接触，即使是浮动元素也是如此，除非这个子元素也创建一个新的BFC
详细描述：
- 内部的盒子会在垂直的方向上一个接一个的放置。
- 垂直方向上距离由
margin决定（属于同一个BFC的两个相邻的box的margin会发生重叠，与方向无关） - 每个元素的左边框与包含块的左边界接触（布局为从左到右），浮动元素也是这样的，也就是说
BFC中元素不会超出他的包含块，而position为absolute布局的元素可以超出包含块边界。 -
BFC的区域不会和float元素区域重合 - 计算
BFC高度的时候，浮动子元素也要参与到计算中 -
BFC就是页面上面的隔离的独立容器，容器中的子元素不会影响到外面的元素，同时外面的元素也不会影响容器里面的元素。
BFC的应用
放置margin的重叠
在同一个BFC中，两个相邻的Box才会发生重叠与方向没有关系，我们很少可以看到在水平方向的margin的重叠，但是在IE浏览器中，可以设置write-mode来实现水平方向的布局。
#green{
margin:10px 10px 10px 10px;
background:lightgreen;
height:100px;
width:100px;
}
#blue{
margin:10px 10px 10px 10px;
background:lightblue;
height:100px;
width:100px;
}
#red{
margin:10px 10px 10px 10px;
background:pink;
height:100px;
width:100px;
}
body {
writing-mode:tb-rl;
}
<body>
<div id="green"></div>
<div id="blue"></div>
<div id="red"></div>
</body>
现在两个盒子之间的margin值是10px而不是我们想象中的20px。
margin在水平方向的重叠
如果我们希望阻止margin重叠的出现，就要将2个元素分别放在一个BFC中即可，但是在在上面的情景中阻止重叠看上去没有什么意义，我们主要将其用在嵌套。
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.first{
margin:20px;
background:lightgreen;
width:100px;
height:100px;
}
ul{
margin:10px;
background:lightblue;
}
li{
margin:25px;
}
<div class="first"></div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
嵌套的margin覆盖问题
我们发现上面的黄框区域的为25px，也就是说将ul的margin的值覆盖掉了,此时div与ul之间的垂直距离，取div、ul、li三者之间的最大外边距。。我们如果要阻止元素的重叠，就要让url生成BFC即可
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.first{
margin:20px;
background:lightgreen;
width:100px;
height:100px;
}
ul{
display: inline-block;
margin:10px;
background:lightblue;
}
li{
margin:25px;
}
html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
.first{
margin:20px;
background:lightgreen;
border: 2px solid lightgreen;
}
ul{
overflow:hidden;
margin:10px;
background:lightblue;
width:100px;
height:200px;
float: left;
}
li{
margin:25px;
}
BFC的margin不覆盖
ps：如果为ul设置了border或padding，那元素的margin便会被包含在父元素的盒式模型内，不会与外部div重叠。
浮动问题
我们的父元素包含子元素，常见的方式是为父元素设置overflow：hidden或是浮动父级元素，根本原因在于创建BFC元素，子浮动元素也参与了高度的计算，就不会产生高度塌陷的问题，实际上只要让父级元素生成BFC就可以。也就是说浮动元素是会脱离文档流的(绝对定位元素会脱离文档流)。如果一个没有高度或者height是auto的容器的子元素是浮动元素，则该容器的高度是不会被撑开的。
所以我们解决的代码是
html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
.first{
margin:20px;
background:lightgreen;
border: 2px solid lightgreen;
/*这四条代码都可以解决上面的问题*/
display:inline-block;
overflow:hidden;
float: left;
position:absolute;
}
ul{
overflow:hidden;
margin:10px;
background:lightblue;
width:100px;
height:200px;
float: left;
}
li{
margin:25px;
}
多栏布局的实现
我们在上面已经总结了一条规律：与浮动元素相邻的已生成的BFC的元素不能和浮动元素之间相互覆盖，所以我们利用这个特性作为多栏布局的一种实现方式。
html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
.left{
background:pink;
float: left;
width:180px;
}
.center{
background:lightyellow;
overflow:hidden;
}
.right{
background: lightblue;
width:180px;
float:right;
}
<div class="container">
<div class="left">
<pre>
.left{
background:pink;
float: left;
width:180px;
}
</pre>
</div>
<div class="right">
<pre>
.right{
background:lightblue;
width:180px;
float:right;
}
</pre>
</div>
<div class="center">
<pre>
.center{
background:lightyellow;
overflow:hidden;
height:116px;
}
</pre>
</div>
</div>
BFC多栏布局样式
这种布局的特点在于左右两栏宽度固定，中间栏可以根据浏览器宽度自适应。
