10种方法解决“父元素塌陷” 问题（包含BFC解决方法）

场景:父元素是一个没有样式的div/ul/等其它类block元素，子元素里面设置浮动，父元素就会发生塌陷问题，这个现象是在页面设计中过程中会发生的十分经典的情况。

前排提示

由于浮动会对后面的元素造成影响，所以在书写html结构的时候应该从上到下、从左到右、从里到外的顺序书写，另外，每一行都需要单独的包起来。

解决方法

使用伪类（好用的的放前面），操作简单兼容性高别问我为什么谁用谁知道，并且推荐使用一个公共的类名.clearFix来设置它，需要清除塌陷父元素只要调用这个伪类就够了，这样就会减少代码的冗余度：

//在父元素里添加这个类

.clearFix：after{
	content:"";//设置为空
	display:block;//将伪元素转化成块元素
	clear：both;//清除浮动
}

给父元素设置高度（例）：

    height：100px;

后面的元素设置clear属性，浮动在哪一边就设哪一边的clear（例）：

	clear：left/right/both;

在子元素后面添加一个空的div（不会影响到其它元素），设置清除两边浮动（例）：

<div>
	<div class="classss">
		这里是内容,这个区域被浮动了。
	</div>
	<div style="clear:both;"></div>
</div>

设置溢出清除overflow:hidden;只要不是visible就行（例）：

<div style="overflow: hidden;">
	<div class="classss">
		这里是内容,这个区域被浮动了。
	</div>
</div>

为父元素设置透明边框（例）：

<div style="border:1px solid transparent;">
	<div class="classss">
		这里是内容,这个区域被浮动了。
	</div>
</div>

为父元素设置padding，只设置一个也可以（例）：

<div style="padding-top:1px;">
	<div class="classss">
		这里是内容,这个区域被浮动了。
	</div>
</div>

使用BFC解决问题（前面的overflow方法已经使用了这个思想），BFC（Block Formatting Context）块级格式上下文。BFC就好像一个城池的围墙，如果给父元素加上一个围墙（BFC），那么就能够让里面的元素无法逃脱父元素的区域，在表现形式上就可以达到清除浮动的效果。

(1）使用inline-block触发BFC,当元素不是行内块元素时，可以通过display:inline-block的样式代码使之转化为行内块元素来触发BFC。

<div style="display:inline-block;">//父元素设施成行内块元素
	<div class="classss">
		这里是内容,这个区域被浮动了。
	</div>
</div>

(2）给父元素设置成浮动来触发BFC（太骚了）。

<div style="float:left/right;">//父元素设置浮动
	<div class="classss">
		这里是内容,这个区域被浮动了。
	</div>
</div>

(3）给父元素设置成绝对/固定定位来触发BFC，因为绝对/固定定位能使父元素脱离了文档流（相对定位不可以）。

<div style="position:absolute;">//父元素设置绝对定位
	<div class="classss">
		这里是内容,这个区域被浮动了。
	</div>
</div>

(4）给父元素设置overflow(前面提示过了)。

	前面查看

后排提示
元素设置为浮动后会提高层级，从而会覆盖后面的文档元素（这里不是塌陷问题了！是float的重叠覆盖！）。如果要防止这种覆盖，可以通过display:inline-block转发为行内块元素，或将文档流元素也设置为浮动元素来出发BFC。

<div>
	<div style="float:left; width:200px; height:200px;">
		这里是内容,这个区域被浮动了。
	</div>
	<div style="width:200px; height:200px; display:inline-block">//转换为行内块元素，触发BFC
		这里是内容。
	</div>
</div>

10种方法解决“父元素塌陷” 问题（包含BFC解决方法）

猜你喜欢