常见的解决bfc的方法

最新推荐文章于 2024-08-31 23:38:40 发布

前端段

最新推荐文章于 2024-08-31 23:38:40 发布

阅读量2.3k

点赞数 1

分类专栏： css

本文链接：https://blog.csdn.net/hkduan/article/details/107093483

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

BFC
Block Formatting Context (“块级格式化上下文”) 的缩写即为 BFC
形成一个完全独立的空间，让空间中的子元素不会影响到外面的布局。

触发条件：
1.float不为none
2.position不为relative和static
3.overflow为auto scroll和hidden
4.display:table-cell或者inline-block

可以解决什么问题呢？
1.解决浮动元素的父元素坍塌
给父元素添加:overflow:hidden，或者display:table-cell

2.兄弟元素外边距高度重合，取最大值
给其中一个兄弟元素包裹一层div，然后触发父元素的BFC，如设置overflow:hidden
或者用padding代替magging

3.2栏目自适应布局
1.float不为none，如:float:left
2.position不为relative和static，position:absolute
3.overflow为auto scroll和hidden，
4.display:table-cell或者inline-block

可以解决什么问题呢？
1.解决浮动元素领父元素坍塌
给父元素添加:overflow:hidden，或者display:table-cell
在这里插入图片描述

2.兄弟元素外边距高度重合，取最大值
给其中一个兄弟元素包裹一层div，然后触发父元素的BFC，如设置overflow:hidden
或者用padding代替maggin

3.两栏布局，一栏固定，一栏自适应

<style>
    .left {
        width: 100px;
        height: 300px;
        float: left;
        background: rgb(139, 214, 78);
    }
 
    .right {
        overflow: hidden;
        height: 300px;
        background: rgb(170, 54, 236);
    }
</style>
<body>
    <div class="left">LEFT</div>
    <div class="right">RIGHT</div>
</body>

4.取消文字环绕

<style>
			.floated{
				background: white; /* 浮动元素背景为 白色*/ 
				float: left; /* 设置 图片浮动到左上角*/
			}
			.text{
                overflow: hidden;
                background: red;  /* 文本元素背景为 红色*/
				margin:0; /* 去掉 p 标签的上下边距*/
			}
		</style>
	</head>
	<body>
		<div class="container">
			<div class="floated">Floated div</div>
			<div class="text">Quae hic ut ab perferendis sit quod architecto,dolor debitis quam rem provident aspernatur tempora expedita.</div> 
    	</div>