子容器设置浮动后撑不开父容器的解决方法

转载于 2012-09-04 14:10:00 发布 · 199 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/playerlife/archive/2012/09/04/2670328.html

本文介绍了解决子容器设置浮动后无法撑开父容器的问题。提供了四种有效的方法：设置父容器为display:inline-block；设置父容器为浮动；在父容器后添加清除浮动的div；使用伪对象方法。

<html>
	<head>
		<title>子容器设置浮动后撑不开父容器的解决方法</title>			
		<style>
		/*
			子容器设置为浮动后会丢失display:block,和clear:both;
			下面几种方法可以解决子容器浮动后撑不开父容器的的问题：
			1. 设置父容器为display:inline-block;
			2. 设置父容器float
			3. 在父容器的结束标签后面添加<div style='clear:both'></div>
			4. 网上还有一个伪对象方法,试了一下,在ie6,ie7中不理想,,就不写出来了
		*/
			* { margin:0; padding:0;}
			.father { border:1px solid gray; float:left; /*display:inline-block*/ }
			.son { float:left; height:100px; border:1px solid red}
		</style>
	<head/>
	<body>
		<div class="father">
		<span style="color:gray">我是父容器</span>
			<div class="son"><span style="color:red">我是子容器</span></div>
			<!--<div style="clear:both;"></div>-->
		</div>
		  <div>我在这..........</div>
</body>
</html>

转载于:https://www.cnblogs.com/playerlife/archive/2012/09/04/2670328.html