初步理解BFC

最新推荐文章于 2019-11-15 11:26:42 发布

letMeAlone_

最新推荐文章于 2019-11-15 11:26:42 发布

阅读量360

点赞数

分类专栏： BFC HTML/CSS

本文链接：https://blog.csdn.net/a250758092/article/details/52590421

版权

HTML/CSS 同时被 2 个专栏收录

21 篇文章 0 订阅

订阅专栏

BFC

1 篇文章 0 订阅

订阅专栏

看完上一篇转载文章对BFC内容有了初步的了解，但还有诸多不明白的地方：

基本定义：

1：普通的overflow:visible块级盒子是不会创建BFC的
2：对于浮动元素，绝对定位元素，非块级元素的块级容器，和具有overflow属性但不是默认值的块级盒子的内容会创建BFC

BFC中的元素的布局是不受外界的影响（我们往往利用这个特性来消除浮动元素对其非浮动的兄弟元素和其子元素带来的影响。通过清除外界影响，而达到相当于清除浮动的目的）

动手实验，对BFC内容的疑问：

通过创建BFC，确实消除了兄弟浮动元素对该元素的影响，但是创建BFC的方式不同，所达到的效果也不同，不过他们确实都清除了浮动的影响

比如：

<html>                                                                       
	<head>                                                                   
		<title>css浮动测试</title>                                               
		<meta charset="UTF-8"/>                                              
		<style type="text/css">                                              
				.box {width:210px;border: 1px solid #000;}                   
.img {width: 100px;height: 100px;background: #696;float: left;}              
.info {background: #ccc;color: #fff;}                                        
p{margin: 0;overflow: auto;}                                                 
		</style>                                                             
	</head>                                                                  
	<body>                                                                   
                                                                             
<div class="box">                                                            
    <div class="img">image</div>                                             
    <p class="info">信息信息信息信息                                                 
    	信息信息信息信息信息信息信息信信息信                                                   
    	息信息信息信息信息信息信息信信息信息信息信息信息信息信息信息信</p>                                  
</div>                                                                       
		                                                                     
	</body>                                                                  
</html>

原本P标签是在图片的下面的，因为图像的辅导，导致浮动元素占据了行框的空间，而P元素则是在图片的下面，内容则是被浮动元素挤到了旁边。

当我用overflow:hidden（非visible即可）;创建BFC的时候， P标签是从图片右边开始，而不是在图片下面开始，当父元素宽度不够时，一样在右边显示

当用float:的方式创建BFC的时候，一样清除了浮动的影响，只是因为父元素宽度不够，P元素往下放了，实际上这种BFC清除浮动的效果又与浮动的内容重合了，不建议这种方式清除，因为它会产生新的浮动问题

当用display:inline-block(非块级元素的块级容器)方式清除浮动：当父元素宽度不足时，该元素会显示在下方，宽度够时，因为inline-block原因，所以排列在右边。这里可以看出inline-block这个属性值，与其说同时具备行元素特点和块级元素特点，倒不如说，它时而作为块元素。时而具备行，块级元素特点

但有一个不明确的是，当overflow:hidden的时候，为什么P标签会在右边开始，而不是下面?假设我对P标签定义了clear:both，它会显示在下面。那么问题来了，overflow:hidden通过创建BFC方式清除浮动与clear清除浮动之间有什么细微的差别？？