在我们写代码的时刻，偶然因为运用了float浮动元素而致使页面中某些元素不能准确的显现，接下来在文章中将为人人细致引见几种消灭浮动的要领，具有肯定的参考价值，愿望对人人有所协助。
【引荐课程：CSS课程】
浮动致使的结果：
（1）因为浮动元素离开了文档流，所以父元素的高度没法被撑开，影响了与父元素同级的元素
（2）与浮动元素同级的非浮动元素会追随厥后，因为浮动元素离开文档流不占有本来的位置
（3）假如该浮动元素不是第一个浮动元素，则该元素之前的元素也须要浮动，不然轻易影响页面的构造显现
例：在一个div中设置三个div，让三个div的来撑开父元素
<style>
.box{border:1px solid #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>
<div class="box">
<div class="red"></div>
<div class="green"></div>
<div class="blue"></div>
</div>
结果图：
加了float:left以后，父元素没法被撑开
消灭浮动的要领
（1）运用clear:both消灭浮动
在代码中在放一个空的div标签，然后给这个标签设置clear:both来消灭浮动对页面的影响。它的长处是简朴，轻易兼容性好，然则平常状况下不发起运用该要领，因为会形成构造杂沓，不利于后期保护
<div style="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:1px solid #ccc;background:#eff2f4;overflow: auto}
（4）双伪元素要领的运用
经由过程给父元素设置双伪元夙来到达消灭浮动的结果
.clearfix:before,.clearfix:after {
content: "";
display: block;
clear: both;
}
总结：以上就是本篇文章的全部内容了，愿望经由过程这篇文章可以让人人对消灭浮动的要领有所相识
以上就是消灭浮动的要领有哪些的细致内容，更多请关注ki4网别的相干文章！
