深入浅析CSS 布局和 BFC
在多列规划中使用 BFC
假如我们创立一个占满整个容器宽度的多列规划,在某些阅读器中最后一列有时候会掉到下一行。这大概是由于阅读器四舍五入了列宽从而所有列的总宽度会超出容器。但假如我们在多列规划中的最后一列里创立一个新的BFC,它将总是占据其他列先占位完毕后剩下的空间。
例如:
<p class="container"> <p class="column">column 1</p> <p class="column">column 2</p> <p class="column">column 3</p> </p>
对应的CSS:
.column { width: 31.33%; background-color: green; float: left; margin: 0 1%; } .column:last-child { float: none; }
未创立 BFC 此前:
增加以下样式创立一个 BFC:
.column:last-child { float: none; overflow: hidden; }
此刻尽管盒子的宽度稍有改动,但规划不会打破。当然,对多列规划来说这不必然是个好方法,但能幸免最后一列下掉。这个问题上弹性盒或许是个更好的解决方案,但这个方法可以用来说明元素在这些环境下的行动。
还有什么能创立 BFC?
除了使用 overflow
创立 BFC 外,其他一些 CSS 属性还创立 BFC。正如我们所看到的,浮动元素创立了 BFC。你的浮动项将包括它里面的任何东西。
使用以下方式都能创立 BFC
- float 的值不是 none。
- position 的值不是 static 或者 relative。
- display 的值是 inline-block、table-cell、flex、table-caption 或者inline-flex
- overflow 的值不是 visible
创立 BFC 的新方式
使用overflow或其他的办法创立BFC时会有两个问题。第一,这些办法本身是有本身的设计目的,所以在使用它们创立BFC时大概会发生副作用。例如,使用overflow创立BFC后在某些状况下大概会看到显现一个滚动条或者元素内容被裁切。
这是由于overflow属性的设计是用来让你告诉阅读器怎样定义元素的溢出状态的。阅读器施行了它最根本的定义。
即便在没有任何不想要的副作用的状况下,使用 overflow
也大概会让其他开发人员感到困惑。为什么 overflow
设定为 auto
或 scroll
?最初的开发者的企图是啥?他们想要这个组件上的滚动条吗?
最平安的做法应当是创立一个 BFC 时并不会带来任何副作用,它内部的元素都平安的呆在这个迷你规划中,这种办法不会引发任何意想不到的问题,也可以懂得开发者的企图。CSS 工作组也十分认同这种设法,所以他们定制了一个新的属性值:display:flow-root
。
flow-root 阅读器支撑状况
你可以使用display:flow-root平安的创立BFC,来解决上文中提到的各种问题:包裹浮动元素、阻挠外边距叠加和阻挠环绕浮动元素。
阅读器对该属性的支撑当前还是有限的,假如你觉得这个属性值很利便,请投票去让Edge也支撑它。不外不管怎样,你此刻应当已经懂得了什么是 BFC,乃至怎样使用 overflow 或其他办法来包裹浮动,乃至知道了 BFC 可以阻挠元素去围绕浮动元素,假如你想使用弹性或网格规划可以在一些不支撑他们的阅读器中使用 BFC 的这些特性做落级处置。
懂得阅读器怎样安置网页是非常根基的。 虽然有时看起来可有可无,但是这些小知识可以加快创立和调试 CSS 规划所需的时间。
以上就是深入浅析CSS 规划和 BFC的具体内容,更多请关注百分百源码网其它相关文章!