浮动元素无法撑开父元素问题

如何解决浮动元素无法撑开父元素问题

首先我们看一下问题

	<style>
		.wrapper {
			border: 1px solid black;
		}
		.content {
			width: 100px;
			height: 100px;
			background-color: #f40;
		}
	</style>
	<div class="wrapper">
		<div class="content"></div>
		<div class="content"></div>
		<div class="content"></div>
		<div class="content"></div>
		<div class="content"></div>
	</div>

容器可疑包裹div

	.content {
		width: 100px;
		height: 100px;
		background-color: #f40;
		float: left;
	}

但是如果我们设置了float属性就会出现这样问题

为什么会出现这样的情况：因为我们给元素加了float属性，这个元素就有了浮动流，不能被普通块级元素发现。
底层原理：设置了float属性和display：absolute;会被自动转换为inline-block
inline-block元素的特点是宽高如果不设置会根据内部元素撑起大小设置，而block元素则不然，block元素的高有内部元素撑起，宽默认100%；

也是查阅了很多的资料最终终于找到三种解决方法

方法一：给父级元素也设置float属性（不建议）

原理浮动元素可以发现浮动元素

方法二：在父级元素下面加一个逻辑性块元素为此元素加属性clear:both；

	<p class="clear"></p>
	
	.clear {
		clear: both;
	}

方法三：利用伪元素选择器（推荐使用）

	.wrapper::before {
		content:"";
		display:inline-block;
		clear:both;
	}

其他风法
给父级加display:inline-block;//注意修改剧中方式margin：0 auto不管用了

用float可以解决编程中的哪些问题：
报纸布局的问题：我们给块级元素比如img标签设置display:inline-block属性或者inline属性都不能让后面紧跟的文字上边界对齐只能下边界对齐，这时我们只需要给块级元素设置float属性就可以解决