BFC

最新推荐文章于 2021-01-19 22:43:27 发布

你真好看l

最新推荐文章于 2021-01-19 22:43:27 发布

阅读量87

点赞数

分类专栏： css

本文链接：https://blog.csdn.net/qq_40052011/article/details/103224308

版权

css 专栏收录该内容

30 篇文章 0 订阅

订阅专栏

1.box bfc概念
box:css布局的基本单位
box是css布局的对象和基本单位，直观说，一个页面由多个box组成
元素的类型和display属性，决定了这个box的类型，不同类型的box，会参与不同的formatting Context
因此，box内的元素会以不同方式渲染，有哪些盒子：
block-level box:
display属性为block,list-item,table的元素，会生成block-level box,并参与block formatting context;
inline-level box:
display属性为line,inline-block,inline-table的元素，会生成inline-level box,并参与inline formatting context

formatting context:
formatting context是w3c css2.1规范中的一个概念
它是页面中的一块渲染区域，并且有一套渲染规则吗，它决定了其子元素该如何定位，以及它和其它元素的关系和相互作用. 最常见的formatting context 是block formatting context和inline formatting context
2bfc是什么
bfc直译为块级格式化上下文，他是一个独立的渲染区域只有block-level box参与
它规定了内部的block-level box 如何布局，并且与这个区域外部毫不相干
3bfc布局规则
内部的box会在垂直方向一个一个放置
bfc的区域不会和float box重叠 //实现两列布局
内部box的垂直方向距离由margin决定，属于同一个bfc的两个相邻box（块级元素）的margin会重叠
计算bfc高度时候，浮动元素也参与计算（清除浮动 haslayout）
bfc就是页面一个独立容器，容器里面的子元素不会影响到外面的元素，反之亦如此

4bfc什么时候会出现？
根元素
float属性不为none
overflow不为visible
position为absolute或fixed
display为inline-block,table-cell,table-caption,flex,inline-flex

需要注意的是，display:table 本身并不会创建 BFC，但是它会产生匿名框 (anonymous boxes)，而匿名框中的 display:table-cell 可以创建新的 BFC，
换句话说，触发块级格式化上下文的是匿名框，而不是 display:table。所以通过 display:table 和 display:table-cell 创建的 BFC 效果是不一样的。

实现两列布局：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>两列布局</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			body{
				min-width: 500px;
			}
			div{
				height:200px;
			}
			#left{
				float: left;
				width: 200px;
				background-color: #0000FF;
			}
			#right{
				overflow: hidden;/*开启bfc,让left和right没有重叠*/
				background-color: #7FFFD4;
			}	
		</style>
	</head>
	<body>
		<div id="left">
		left	
		</div>
		<div id="right">
			right
		</div>
	</body>
</html>

在这里插入图片描述实现商品列：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#wrap{
				
				width: 400px;
				margin: 0 auto;
				border: 1px solid;
				
			}
			#left{
				float: left;
				border: 1px solid #008000;
				height: 200px;
				width: 200px;
				background: url(1.jpg);
				background-position: -150px -150px;
				
				
			}
			#right{
				/*margin-left: 10px; 不行，因为left浮动提升了0.5层级，设置margin是会进下一层*/
				
				padding-left: 10px;
				
				
				/*下面几条一起，实现文字溢出显示省略号*/
				/*display: block;  */
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;/*开启bfc,否则文字环绕图片*/
			}
		</style>
	</head>
	<body>
		<div id="wrap">
			<div id="left">
				
			</div>
			<div id="right">
				此产品买一送一此产品买一送一<br>
				此产品买一送一此产品买一送一<br>
				此产品买一送一<br>
				此产品买一送一<br>
				此产品买一送一<br>
				此产品买一送一<br>
				
				
			</div>
			
		</div>
		
	</body>
</html>

在这里插入图片描述 margin重叠：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!--
		属于同一个bfc的两个相邻box（块级元素）的margin会重叠
			防止margin重叠：
				外层元素能用padding代替就用padding
				外层元素 overflow:hidden;

				内层元素绝对定位 postion:absolute:
				内层元素 加float:left;或display:inline-block;
				内层元素padding:1px;
				内层元素透明边框 border:1px solid transparent
		-->
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			/*margin重叠1*/
			#up,#down{
				width: 50px;
				height:50px;
				margin:50px;
				background-color: #0000FF;
			}
			
			/*margin重叠2*/
			#one{
				overflow: hidden;/*开启bfc,使他们分别在两个bfc中，防止margin重叠*/
				height: 300px;
				width: 300px;
				margin: 50px;
				background-color: #7FFFD4;
			}
			#two{
				height:30px;
				width:30px;
				margin: 50px;
				background-color: red;
				
			}
			
			
		</style>
	</head>
	<body>
		<div id="up">
			up
		</div>
		<br><!--让他们隔开，防止margin重叠 -->
		<div id="down">
			down
		</div>
		<div id="one">
		   <div id="two">
			
		   </div>
			
		</div>
	</body>
</html>