摘要：属性，会破坏文档流，与非定位元素很难结合起来用，因此也不适合自适应布局。，其对无感，无法自适应剩余浏览器空间。总结的定义，就如同结界一样，完全封闭对外无任何影响。引起的各种属性与自适应布局自适应布局与属性说明
BFC的定义
BFC的全称是block formatting context（块状格式化上下文），当BFC起作用的时候，其元素内部无论怎么翻江倒海都不会影响到外部元素，同样，外部元素的变化也不会影响到BFC内部元素，这就跟结界一样，你可以理解为有一个很强的护盾在包裹着BFC元素，这也是为什么BFC元素不会发生margin重叠的原因。
引起BFC的条件BFC起作用不需要特别多的条件，满足以下情况都会引起BFC：
html根元素
float不为none的元素
overflow为auto、hidden或scroll的元素
position不为relative或none的元素
display为inline-block的元素
table-cell、table-row或者table-caption元素
在清除浮动的时候，只要元素满足以上这些情况，就不需要再加clear属性。
BFC与自适应布局在之前的文章中，我们有说到过float实现的文字环绕效果，这时候如果给文字加上overflow:hidden就可以实现两栏自适应布局。这样实现的好处是文字的宽度是自适应的，无论图片是多大或多小，排版都不会乱。代码和效果如下：
.fl {
float: left;
width: 100px;
margin-right: 10px;
}
.content {
overflow: hidden;
}
这里是文本展示，这里是文本展示，这里是文本展示，这里是文本展示，这里是文本展示，这里是文本展示，这里是文本展示， 这里是文本展示，这里是文本展示，这里是文本展示，这里是文本展示，这里是文本展示，这里是文本展示，这里是文本展示
图片和文字之间如果需要间距，可以在图片中设置margin-right的值或者透明border，也可以在内容区设置透明border，但是不可以直接在内容区设置margin-left，如果是设置了margin-left，其间距必须是图片的宽度加上你想设置的间距大小，这样的间距就会对图片的大小产生依赖。
与BFC有关的属性说明由于引起BFC的属性都有一些古怪的特性，并不是所有的情况都适合实现自适应布局，下面我们来一一说明下：
float属性，设置了float之后，元素本身也会BFC化，由于具有破坏性和包裹性，也就失去了宽度自适应的特性，所以float并不适合自适应布局。
position属性，position会破坏文档流，与非定位元素很难结合起来用，因此也不适合自适应布局。
overflow:hidden，这个属性要比float和position好很多，设置了overflow:hidden的元素，整体上跟普通元素差不多，也保留着普通元素的宽度自适应性，但是有一个缺点，就是内容溢出会被裁剪。在平时的开发中，这种场景不是很常见，因此overflow: hidden可以作为常用的BFC布局。
display:inline-block，由于inline-block会让元素尺寸包裹，因此也不适用于BFC布局。
display:table-cell，table-cell会让元素表现得跟单元格一样，其有两个特性，一个是父元素宽度足够时，展示的是设置的宽度；第二个是，但元素宽度超出父元素时，展示的是父元素的宽度。因此，table-cell也可用于BFC布局，其原理就是设置一个足够多的宽度值，例如3000px，这样就可以充分利用浏览器的剩余空间，也不会产生滚动条，内容也是自适应的。
display:table-row，其对width无感，无法自适应剩余浏览器空间。
display:table-caption，没有任何用处。
总结BFC的定义，BFC就如同结界一样，完全封闭对外无任何影响。
引起BFC的各种属性
BFC与自适应布局
自适应布局与BFC属性说明
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/117011.html
摘要：为了实现文字环绕效果，规范规定的措施是使父容器塌陷，元素脱离文档流浮动产生，元素周围的内容转换为围绕元素排列。 选择器注意点 属性选择器 [attr^=value] - 开头或全等 [attr$=value] - 结尾或全等 [attr*=value] - 包含值 [attr~=value] - 字符串包含 选择器组 A > B - 直接子节点 A + B - 下一个兄弟节点 A...
摘要：包裹性所谓包裹性，其实是由包裹和自适应两部分组成。官方对属性的解释是元素盒子的边不能和前面的浮动元素相邻。清除高度塌陷的问题在上面的章节中，如果子元素设置浮动属性，则父元素就会出现高度塌陷的问题。 float属性是CSS中常用的一个属性，在实际工作中使用的非常多，如果使用不当就会出现意料之外的效果。虽然很多人说浮动会用就行、浮动过时了，但是对于优秀的前端开发人员，需要有刨根问底的精神，...
摘要：为了实现文字环绕效果，规范规定的措施是使父容器塌陷，元素脱离文档流浮动，元素周围的内容转换为围绕元素排列。从浮动的起因和浮动的实现后果来看，浮动不适合用于大范围的布局，更适合利用其特性实现一些小范围的流体布局效果。 张鑫旭的CSS深入理解之float浮动学习笔记 float的历史 float为产生文字环绕效果而生 float的特性 — 包裹和破坏 包裹：即产生一个BFC破坏：使父容器...
摘要：张鑫旭的深入理解之学习笔记基本属性属性介绍默认当与值相同时，等同于当与值不相同时，其中一个值被赋予时，若另一个值为，那这个会被重置为作用前提元素非对应方位的尺寸限制拉伸对于单元格等需要为状态才可以与滚动条页面默认滚动条来自与无 《张鑫旭的CSS深入理解之overflow》学习笔记 overflow基本属性 overflow属性介绍 overflow: visible(默认)|hidd...
阅读 2772·2021-11-23 09:51
阅读 3217·2021-11-22 09:34
阅读 3138·2021-10-27 14:14
阅读 1430·2021-09-09 09:32
阅读 1236·2019-08-30 15:55
阅读 3168·2019-08-30 15:54
阅读 942·2019-08-30 15:52
阅读 1679·2019-08-30 12:46
