深入理解css中BFC
时间：2023-03-31 12:12:51
CSS
的定义BFCBFC的全称是blockformattingcontext（块格式化上下文）。元素的变化不会影响BFC内部的元素，这点和附魔是一样的。你可以理解为有一个坚固的屏蔽层包裹着BFC元素，这就是为什么BFC元素的边距不会重叠的原因。引起BFC的条件BFC起作用所需的条件并不多。以下情况会导致BFC：HTML根元素floatisnotnoneelementoverflowisauto,hiddenorscrollelementpositionisnotrelativeornoneelementdisplayisinline当清除元素table-cell,table-row或table-的浮动时-block的caption，只要元素满足以上条件，就不需要加clear属性。BFC与AdaptiveLayout在上一篇文章中，我们提到了通过float实现的文字环绕效果。这时候如果给文本加上overflow:hidden，就可以实现两栏自适应布局。这样实现的好处是文字的宽度自适应，无论图片大小，排版都不会乱。代码及效果如下：.fl{float:left;宽度：100px；margin-right:10px;}.content{overflow:hidden;}
这是文字显示，这里是文字显示，这里是文字显示，这里是文字显示，这里是文字显示，这里是文字显示，这里是文字显示，这里是文字显示，这里是文字显示，这里是文字显示，这里是文字显示，这里是文字显示，这里是文字显示，这里是文字显示 如果需要图片和文字之间有间距，可以设置margin-right的值或者图片中的透明边框，也可以在内容区设置透明边框，但是不能直接在内容区设置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，没有宽度感，无法适配浏览器剩余空间。显示：表格标题，没有用。总结一下BFC的定义，BFC就像一个结界，完全封闭，对外界没有任何影响。引起BFC的各种属性BFC和自适应布局AdaptivelayoutandBFCattributedescription
