BFC ( Block Formatting Contexts ) 即块级格式化上下文,从样式上看,它与普通的容器没有什么区别,但是从功能上, BFC 可以看作是隔离了的独立容器,容器里面的元素不会在布局上影响到外面的元素,并且 BFC 具有普通容器没有的一些特性,例如可以包含浮动元素,使到它可以包含浮动元素,从而防止出现高度塌陷的问题
- body {
- width: 300px;
- position: relative;
- }
- .aside {
- width: 100px;
- height: 150px;
- float: left;
- background: #f66;
- }
- .main {
- height: 200px;
- background: #fcc;
- }
- <body>
- <div class="aside"></div>
- <div class="main"></div>
- </body>
- .main {
- overflow: hidden;
- }
- .par {
- border: 5px solid #fcc;
- width: 300px;
- }
-
- .child {
- border: 5px solid #f66;
- width: 100px;
- height: 100px;
- float: left;
- }
- <body>
- <div class="par">
- <div class="child"></div>
- <div class="child"></div>
- </div>
- </body>
- .par {
- overflow: hidden;
- }
- p {
- color: #f55;
- background: #fcc;
- width: 200px;
- line-height: 100px;
- text-align: center;
- margin: 100px;
- }
- <p>Haha</p>
- <p>Hehe</p>
- .wrap {
- overflow: hidden;
- }
- p {
- color: #f55;
- background: #fcc;
- width: 200px;
- line-height: 100px;
- text-align: center;
- margin: 100px;
- }
- <p>Haha</p>
- <div class="wrap">
- <p>Hehe</p>
- </div>
其实以上的几个例子都体现了 BFC 布局规则第五条,BFC 就是页面上的一个隔离的独立容器,容器里面的子元素不会影响到外面的元素。反之也如此
因为 BFC 内部的元素和外部的元素绝对不会互相影响,因此, 当 BFC 外部存在浮动时,它不应该影响 BFC 内部 Box 的布局, BFC 会通过变窄,而不与浮动有重叠。同样的,当 BFC 内部有浮动时,为了不影响外部元素的布局, BFC 计算高度时会包括浮动的高度。避免 margin 重叠也是这样的一个道理