清除浮动的方法有哪些

来源：懂视网责编：小OO 时间：2020-11-02 22:13:45

清除浮动的方法有哪些

在我们写代码的时候，有时因为使用了float浮动元素而导致页面中某些元素不能正确的显示，接下来在文章中将为大家详细介绍几种清除浮动的方法，具有一定的参考价值，希望对有所帮助。【推荐课程：CSS课程】。浮动导致的后果。（1）由于浮动元素脱离了文档流，所以父元素的高度无法被撑开，影响了与父元素同级的元素。（2）与浮动元素同级的非浮动元素会跟随其后，因为浮动元素脱离文档流不占据原来的位置。（3）如果该浮动元素不是第一个浮动元素，则该元素之前的元素也需要浮动，否则容易影响页面的结构显示。例：在一个div中设置三个div，让三个div的来撑开父元素。

推荐度：

点击下载本文 文档为doc格式

导读在我们写代码的时候，有时因为使用了float浮动元素而导致页面中某些元素不能正确的显示，接下来在文章中将为大家详细介绍几种清除浮动的方法，具有一定的参考价值，希望对有所帮助。【推荐课程：CSS课程】。浮动导致的后果。（1）由于浮动元素脱离了文档流，所以父元素的高度无法被撑开，影响了与父元素同级的元素。（2）与浮动元素同级的非浮动元素会跟随其后，因为浮动元素脱离文档流不占据原来的位置。（3）如果该浮动元素不是第一个浮动元素，则该元素之前的元素也需要浮动，否则容易影响页面的结构显示。例：在一个div中设置三个div，让三个div的来撑开父元素。

清除浮动的方法有clearboth的方法、设置clearfix的方法、overflow的方法以及给父元素设置双伪元素的方法

在我们写代码的时候，有时因为使用了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;
}

总结：

清除浮动的方法有哪些

推荐度：

点击下载本文 文档为doc格式

标签：方法清除有哪些方法

热门焦点

清除浮动的方法有哪些

清除浮动的方法有哪些

清除浮动的方法有哪些

最新推荐

猜你喜欢

热门推荐