今天看一篇BFC的文章,并动手试了其中的规则,对一下这条不是很理解,求指导:
http://www.cnblogs.com/dojo-l...
每个元素的左外边距与包含块的左边界相接触(从左向右),即使浮动元素也是如此。(这说明BFC中子元素不会超出他的包含块,而position为absolute的元素可以超出他的包含块边界)
实际
html
<!-- BFC子元素不会超出包含他的元素,positon为absolute的子元素可以
问题:对inner-1设置position:absolute,并没有超出父元素的边界?
-->
<section class="bfc-rules-wrap">
<h3>2. 内部的元素不会超出BFC </h3>
<article class="bfc-rules-2">
<div class="inner-1 item">1. float + absolute</div>
<div class="inner-2 item">2. float</div>
<div class="inner-3 item">3. float</div>
</article>
</section>
CSS
.bfc-rules-2{
width: 400px;
background-color: #e2e2e2;
margin-left: 30px;
display:inline-block;
.item{
width: 100px;
height: 100px;
margin: 10px 0;
}
.inner-1{
background-color: rgb(204, 202, 228);
float: left;
position: absolute;
}
.inner-2{
background-color: rgb(187, 148, 148);
width: 120px;
float: left;
// position: absolute;
}
.inner-3{
background-color: rgb(82, 168, 33);
float: left;
}
}
实际从并没有超出边界
那么这条规则该怎么理解?
从字面意思上理解 他说可以超出 并不是说默认就超出 理论上所有的元素都可以超出父容器的显示范围 BFC只是定义区域内的排序规则 而不是展示范围