浮动的清除方式

Posted 蓝眼睛

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了浮动的清除方式相关的知识,希望对你有一定的参考价值。

在什么时候需要用到浮动呢?

我们都知道当需要一个左中右三列布局的时候,就需要给左中右的三个div添加float

添加了浮动有什么影响呢?

 当一个内层元素是浮动的时候,其父元素也就不再包含这个浮动的内层元素,因为此时浮动的元素已经脱离的文档流。这个时候外层的div就无法被撑开,margin也会失效。

这时候我们就需要清除浮动。。。看下面的demo

<style>
.outer{border: 1px solid #ccc;background: #fc9;color: #fff; margin: 50px auto;padding: 50px;  }
.div1{width: 80px;height: 80px;background: red;float: left;}
.div2{width: 80px;height: 80px;background: blue;float: left;}
.div3{width: 80px;height: 80px;background: sienna;float: left;}
</style>
<div class="outer">
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div3">3</div> 
</div>

 这时候我们没有清除浮动,外层的div没有被撑开 ,效果图为:

第一种方法:给内层元素加一个空的div然后加样式清除

<style>
.outer{border: 1px solid #ccc;background: #fc9;color: #fff; margin: 50px auto;padding: 50px;  }
.div1{width: 80px;height: 80px;background: red;float: left;}
.div2{width: 80px;height: 80px;background: blue;float: left;}
.div3{width: 80px;height: 80px;background: sienna;float: left;}
.clear{clear:both;height:0;} </style> <div class="outer"> <div class="div1">1</div> <div class="div2">2</div> <div class="div3">3</div>
<div class="clear"></div> </div>

 

 

 第二种方法:给外层元素加overflow

<style>
.outer{border: 1px solid #ccc;background: #fc9;color: #fff; margin: 50px auto;padding: 50px; overflow:hidden;}
.div1{width: 80px;height: 80px;background: red;float: left;}
.div2{width: 80px;height: 80px;background: blue;float: left;}
.div3{width: 80px;height: 80px;background: sienna;float: left;}
</style>
<div class="outer">
    <div class="div1">1</div>
    <div class="div2">2</div>
    <div class="div3">3</div>  
</div>

 

 第三种方法:利用伪元素after,类似给内层元素添加一个div

<style>
.outer{border: 1px solid #ccc;background: #fc9;color: #fff; margin: 50px auto;padding: 50px;}
.outer:after{content: \'\'; display: block; clear: both; height: 0; visibility: hidden;}
.div1{width: 80px;height: 80px;background: red;float: left;} .div2{width: 80px;height: 80px;background: blue;float: left;} .div3{width: 80px;height: 80px;background: sienna;float: left;} </style> <div class="outer"> <div class="div1">1</div> <div class="div2">2</div> <div class="div3">3</div> </div>

 

以上是关于浮动的清除方式的主要内容,如果未能解决你的问题,请参考以下文章

清除浮动的几种方式和兼容性处理

.clearfix 清除浮动,@import

HTML要怎么清除浮动

float与清除浮动的注意事项有哪些?

清除浮动的集中方式

浮动+清除浮动