争怎路由网/网站教程/内容

清除浮动的方法有哪一些

网站教程2022-09-04 阅读
网页的本质就是超级文本标记语言,通过结合使用其他的Web技术(如:脚本语言、公共网关接口、组件等),可以创造出功能强大的网页。因而,超级文本标记语言是万维网(Web)编程的基础,也就是说万维网是建立在超文本基础之上的。超级文本标记语言之所以称为超文本标记语言,是因为文本中包含了所谓“超级链接”点。
清除浮动的方法有clear:both的方法、设置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;
}

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

以上就是清除浮动的方法有哪些的详细内容,更多请关注php中文网其它相关文章!


网站建设是一个广义的术语,涵盖了许多不同的技能和学科中所使用的生产和维护的网站。



……