清除浮动的几种方法

浮动是布局中经常采用的手段，但是浮动带来的高度塌陷却为布局带来麻烦，所以我们经常需要清除浮动，下文记录几种常用的清除浮动手段

高度塌陷：

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;
		}

清除浮动效果图：