清除浮動的幾種方法

浮動是佈局中常常採用的手段，可是浮動帶來的高度塌陷卻爲佈局帶來麻煩，因此咱們常常須要清除浮動，下文記錄幾種經常使用的清除浮動手段

高度塌陷：

clear屬性

第一種運用clear的方式在須要清浮動的元素下放一個div，並加上clear:both
html

<div class="content" >
        <div class='float'></div>
        </div>	
        <div class='clear'></div>
	<p>some text</p>
複製代碼

css

.float{
			width:300px;height:300px;
			float:left;
			background: green;
			opacity: .5;
		}
		p{
			background:red;
		}
		.clear{
		    clear:both;
		}
複製代碼

第二種方式是用僞元素:before或:after
html

<div class="content" >
         <div class='float'></div>
        </div>	
	<p>some text</p>
複製代碼

css

.content:after{
                   content:'';
                   display:'block';
                   clear:both;
               }
              float{
			width:300px;height:300px;
			float:left;
			background: green;
			opacity: .5;
		}
		p{
			background:red;
		}
複製代碼

overflow:hidden

該方法利用了BFC的特性，當元素有如下特性時，觸發BFC

• html根元素
• float的值不爲none
• overflow的值爲hidden、auto或scroll
• position的值不爲static或relative
• display的值爲table-cell、table-caption、或inline-block

html

<div class="content" >
		<div class="float"></div>
	</div>	
	<p>some text</p>
複製代碼

css

.content{
			overflow: hidden;
		}
		.float{
			float:left;
			width:100px;height:100px;
			background: green;
			opacity: .5;
		}
		p{
			background:red;
		}
複製代碼

清除浮動效果圖：