web经典问题-清浮动-事件冒泡

最近使用bootstrap写页面发生两个web前端经典问题。请浮动，时间冒泡

1.清浮动。

1-1发生场景：

自适应布局中：当你自使用的时候外部div不设置高度，内部div设置浮动，浮动后就会变为inline。那么外面的盒子不会被撑大，下面的div就会发生重叠。

<style>
			.content{background: #23527C;width: 80%;margin: 0px auto;}
			.lef{width:300px;height:300px;float: left;outline: 1px solid #C9302C;}
			.footer{width:80%;height: 200px; background-color: red;}
		</style>
		<div class="content">
			<div class="lef"></div>
			<div class="lef"></div>
			<div class="lef"></div>
			<div class="lef"></div>
			<div class="lef"></div>
		</div>
		<div class="footer"></div>

效果图

footer上去了

1-2解决方案：

代码如下

<style>
			.content{background: #23527C;width: 80%;margin: 0px auto;}
			.lef{width:300px;height:300px;float: left;outline: 1px solid #C9302C;}
			.footer{width:80%;height: 200px; background-color: red;margin: 0 auto;}
			.qfd:after{content: ".";visibility: hidden;clear: both;display: block;height: 0px;}
		</style>
		<div class="content qfd">
			<div class="lef"></div>
			<div class="lef"></div>
			<div class="lef"></div>
			<div class="lef"></div>
			<div class="lef"></div>
		</div>
		<div class="footer"></div>

效果图：

2.事件冒泡

2-1发生场景

<style>
			.content{background: #23527C;width: 80%;margin: 0px auto;}
			.lef{width:300px;height:300px;float: left;outline: 1px solid #C9302C;}
		</style>
		<script>
			function outter(){
				alert("outter");
			}
			function inner(){
				alert("inner");
			}
		</script>
		<div class="content qfd" οnclick="outter()">
			<div class="lef" οnclick="inner()"></div>
			<div class="lef"></div>
			<div class="lef"></div>
			<div class="lef"></div>
			<div class="lef"></div>
		</div>

2-1 解决办法

<span style="color:#990000;"><div class="lef" οnclick="inner(); return false"></div></span>

加上返回ok。