BFC常用知识点

最新推荐文章于 2022-10-27 16:54:19 发布

肖哒哒啊

最新推荐文章于 2022-10-27 16:54:19 发布

阅读量152

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_38618788/article/details/118254901

版权

前端专栏收录该内容

18 篇文章 0 订阅

订阅专栏

官方文档：https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Block_formatting_context

1、BFC是什么：BFC(block formatting context)块级格式化上下文，它是页面中的一块渲染区域，并且有一套属于自己的渲染规则，它决定了元素如何对齐内容进行布局，以及与其他元素的关系和相互作用。当涉及到可视化布局的时候，BFC提供了一个环境，HTML元素在这个环境中按照一定规则进行布局

2、BFC
解决问题1，浮动元素令父元素高度坍塌的问题
在这里插入图片描述

    <style type="text/css">
		 .father{
		 	overflow: hidden;  /*加上这行解决 浮动元素影响父元素高度塌陷问题*/
		 	border:1px solid red;
		 }
		 .son{
		 	float: left;
		 	width: 100px;
		 	height:100px;
			background-color: green;
		 }
    </style>
    <div class="father">
		<div class="son">
		</div>
    </div>

解决问题2，非浮动元素被浮动元素覆盖
在这里插入图片描述

		.box1{
			float: left;
			width:150px;
			height:150px;
			background-color: red;
		}
		.box2{
			overflow: hidden;  /*解决： 非浮动元素被浮动元素覆盖*/
			width:200px;
			height:200px;
			background-color: green;
		}
    </style>
    
    <div class="box1">
    </div>
    <div class="box2">
    </div>

解决问题3，两栏自适应布局，与上述问题类似。
在这里插入图片描述

    <style type="text/css">
		.box1{
			float: left;
			width:100px;
			height:200px;
			background-color: red;
		}
		.box2{
			overflow: hidden;
			height:200px;
			background-color: green;
		}
    </style>

    <div class="box1">
    </div>
    <div class="box2">
    </div>

解决问题4，外边距垂直方向重合的问题!

		.box1{
			width:200px;
			height:200px;
			background-color: red;
			margin:10px 0;
		}
		.box2{
			overflow: hidden;  /*外边距垂直方向重合的问题*/
		}
		.box3{
			height: 200px;
			width:200px;
			background-color: green;
			margin:10px 0;
		}
    </style>
    <div class="box1">
    </div>
    <div class="box2">
    	<div class="box3"></div>
    </div>

解决问题5，字体环绕
在这里插入图片描述

    <style type="text/css">
		.box1{
			float: left;
			width:50px;
			height:50px;
			background-color: red;
		}
		p{
			overflow: hidden; /*解决字体环绕*/
		}
    </style>
</head>

<body>
    <div class="box1">
    </div>
    <p>环绕环绕环绕环绕环绕环绕环绕环绕环绕环绕环绕环绕环绕环绕环绕环绕环绕环绕环绕环绕环绕环绕环绕环绕环绕环绕环绕环绕环绕环绕环绕环绕环绕环绕环绕环绕环绕环绕环绕环绕环绕环绕环绕环绕环绕环绕</p>
</body>