清除浮动的几种方法

最新推荐文章于 2021-11-21 10:35:06 发布

转载最新推荐文章于 2021-11-21 10:35:06 发布 · 48 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5a9fefcaf265da237c687450

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

高度塌陷：

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;
		}
复制代码

清除浮动效果图：