流体特性
块级元素,如div元素(下同),在默认情况下(非浮动、绝对定位等),水平方向会自动填满外部的容器;如果有 margin
或者 padding
或者 border
等,实际内容区域会响应变窄。
BFC
:块级格式化上下文(Block formatting context
)。
它是一个独立的渲染区域,只有 Block-level box
参与, 它规定了内部的 Block-level Box
如何布局,并且与这个区域外部毫不相干。BFC元素特性表现原则就是,内部子元素再怎么翻江倒海,翻云覆雨都不会影响外部的元素。
BFC布局规则:
- 内部的盒子会在垂直方向,一个接一个地放置。
- 盒子垂直方向的距离由
margin
决定。属于同一个BFC
的两个相邻盒子的margin
会发生重叠 - 每个元素的
margin
盒子的左边, 与包含块border
盒子的左边相接触。即使存在浮动也是如此。 BFC
的区域不会与float
盒子重叠。BFC
就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此。- 计算
BFC
的高度时,浮动元素也参与计算
触发BFC:
float
的值不为none
。overflow
的值为auto
,scroll
或hidden
。display
的值为table-cell
,table-caption
,inline-block
中的任何一个。position
的值不为relative
和static
。
使用场景:
-
场景一:左侧固定右侧自适应
<style> .left{ width: 200px; float: left; } .right{ margin-left: 200px; //必须大于左侧的宽度,否则无效果 overflow: hidden; //创建个BFC display:block; //必须设置为块级元素,不然将不会撑满剩下部分 } </style> <div class='left'></div> <div class='right'></div>
-
场景二:阻止垂直外边距(
margin-top
、margin-bottom
)折叠按照
BFC
的定义,只有同属于一个BFC
时,两个元素才有可能发生垂直margin
的重叠,这个包括相邻元素,嵌套元素,只要他们之间没有阻挡就会发生margin
重叠;因此要解决margin
重叠问题,只要让它们不在同一个BFC
就行了,但是对于两个相邻元素来说,意义不大,没有必要给它们加个外壳,但是对于嵌套元素来说就很有必要了,只要把父元素设为BFC
就可以了。这样子元素的margin
就不会和父元素的margin
发生重叠;