清除浮动的方法有哪些

　　浮动导致的后果：

　　（1）由于浮动元素脱离了文档流，所以父元素的高度无法被撑开，影响了与父元素同级的元素

　　（2）与浮动元素同级的非浮动元素会跟随其后，因为浮动元素脱离文档流不占据原来的位置

　　（3）如果该浮动元素不是第一个浮动元素，则该元素之前的元素也需要浮动，否则容易影响页面的结构显示

　　例：在一个div中设置三个div，让三个div的来撑开父元素

　　<style>

　　.box{border:1pxsolid#ccc;background:pink;}

　　.red{width:100px;height:100px;background:red;}

　　.green{width:100px;height:100px;background:green;}

　　.blue{width:100px;height:100px;background:blue;}

　　</style>

　　<body>

　　<divclass="box">

　　<divclass="red"></div>

　　<divclass="green"></div>

　　<divclass="blue"></div>

　　</div>

　　效果图：

　　加了float:left之后，父元素无法被撑开

　　清除浮动的方法

　　（1）使用clear:both清除浮动

　　在代码中在放一个空的div标签，然后给这个标签设置clear:both来清除浮动对页面的影响。它的优点是简单，方便兼容性好，但是一般情况下不建议使用该方法，因为会造成结构混乱，不利于后期维护

　　<divstyle="clear:both"></div>

　　（2）利用伪元素clearfix来清除浮动

　　给父级元素添加了一个:after伪元素，通过清除伪元素的浮动，达到撑起父元素高度的目的

　　.clearfix:after{

　　content:"";

　　display:block;

　　visibility:hidden;

　　clear:both;

　　}

　　（3）overflow方法的使用

　　当给父元素设置了overflow样式，不管是overflow:hidden或overflow:auto都可以清除浮动只要它的值不为visible就可以了，它的本质就是建构了一个BFC，这样使得达到撑起父元素高度的效果

　　.box{border:1pxsolid#ccc;background:#eff2f4;overflow:auto}

　　（4）双伪元素方法的使用

　　通过给父元素设置双伪元素来达到清除浮动的效果

　　.clearfix:before,.clearfix:after{

　　content:"";

　　display:block;

　　clear:both;

　　}

　　总结：以上就是本篇文章的全部内容了，希望通过这篇文章能够让大家对清除浮动的方法有所了解

本文转载自中文网

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/css3-style/c56350.shtml