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。