CSS里的块级格式是什么

今天小编给大家分享一下CSS里的块级格式是什么的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。

　　1.BFC定义

　　BFC(Blockformattingcontext)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-levelbox（块级元素）参与，它规定了内部的Block-levelBox如何布局，并且与这个区域外部毫不相干.

　　通俗地来说：创建了BFC的元素就是一个独立的盒子，里面的子元素不会在布局上

　　影响外面的元素（里面怎么布局都不会影响外部），BFC任然属于文档中的普通流

　　2.BFC的生成：

　　知道了BFC怎么触发BFC

　　满足以下条件之一都可以触发BFC，变身为BFC

　　根元素

　　float属性不为none

　　position不为static和relative

　　overflow不为visible

　　display为inline-block,table-cell,table-caption,flex,inline-flex

　　你会发现BFC无处不在，只是自己用的时候不知道而已

　　3.BFC布局规则：

　　变身为BFC后有什么特性呢，以下：

　　内部的Box会在垂直方向，一个接一个地放置。

　　Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠

　　每个元素的marginbox的左边，与包含块borderbox的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。

　　BFC的区域不会与floatbox重叠。

　　BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

　　计算BFC的高度时，浮动元素也参与计算

　　4.BFC作用：

　　用起来comeboby

　　1.防止外边距重叠

　　bfc导致的属于同一个bfc中的子元素的margin重叠(Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠)

　　问题：由图可以看到，String1和String2之间只有20px的margin，按理来说应该是40px，但这是在bfc中导致了他们的margin重叠

　　代码：

　　<style>.container1{

　　/*通过overflow：hidden可以创建bfc*/

　　overflow:hidden;

　　background-color:red;

　　width:300px;

　　}

　　.sub1{

　　margin:20px0px;

　　background-color:#dea;

　　}</style><divclass="container1">

　　<divclass="sub1">String1</div>

　　<divclass="sub1">String2</div></div>

　　解决方法：我们可以在div外面包裹一层容器，并触发该容器生成一个BFC。那么两个div便不属于同一个BFC，就不会发生margin重叠了。

　　代码：

　　<style>

　　.newbfc{

　　overflow:hidden;

　　}</style><divclass="container1">

　　<divclass="sub1">String1</div>

　　<divclass="newbfc"><divclass="sub1">String2</div></div></div>

　　2.清除浮动：

　　问题：当元素的子元素都浮动后，会出现高度坍塌的现象，即父容器的高度不会被撑开

　　代码：

　　<style>

　　.pre2{

　　width:200px;

　　border:2pxsolidred;

　　}

　　.float1,.float2{

　　width:100px;

　　height:100px;

　　float:left;

　　}

　　.float1{

　　background-color:#dee;

　　}

　　.float2{

　　background-color:#dcc;

　　}</style><divclass="pre2">

　　<divclass="float1"></div>

　　<divclass="float2"></div></div>

　　解决方法：

　　bfc的规则：计算BFC的高度时，浮动元素也参与计算所以只要将父容器设置为bfc就可以把子元素包含进去：

　　这个容器将包含浮动的子元素，它的高度将扩展到可以包含它的子元素，在这个BFC，这些元素将会回到页面的常规文档流。

　　.pre2{

　　width:200px;

　　border:2pxsolidred;

　　/*设置overflow*/

　　overflow:hidden;

　　}

　　3.解决布局：防止文字环绕

　　代码：

　　<style>.container2{

　　overflow:hidden;

　　width:200px;

　　}

　　.box{

　　float:left;

　　width:100px;

　　height:30px;

　　background-color:#daa;

　　}</style><divclass="container2">

　　<divclass="box"></div>

　　<pstyle="background-color:#eea">sdfadsfdfffffffffdsfsfffffsfdfsdsdfsdffffffff</p></div>

　　这个p元素并没有移动，但是它却出现在浮动元素的下方。p元素的lineboxes（指的是文本行）进行了移位。此处lineboxes的水平收缩为浮动元素提供了空间。

　　bfc的规则：每个元素的marginbox的左边，与包含块borderbox的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。

　　解决这个问题只要将p元素添加overflow：hidden使其成为一个新的bfc就可以了

以上就是“CSS里的块级格式是什么”这篇文章的所有内容，感谢各位的阅读！相信大家阅读完这篇文章都有很大的收获，小编每天都会为大家更新不同的知识，如果还想学习更多的知识，请关注亿速云行业资讯频道。