提供Discuz ,ECShop ,PHPCMS ,帝国CMS ,CSS教程 ,PHP教程 ,DedeCMS ,WordPress ,HTML教程等cms问题查询.
当前位置: CSS教程 > 消灭浮动的要领有哪些【css教程】,float

消灭浮动的要领有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;
}

总结:以上就是本篇文章的全部内容了,愿望经由过程这篇文章可以让人人对消灭浮动的要领有所相识

以上就是消灭浮动的要领有哪些的细致内容,更多请关注ki4网别的相干文章!

「梦想一旦被付诸行动,就会变得神圣,如果觉得我的文章对您有用,请帮助本站成长」

分享到:
赞(0) 打赏

支付宝扫一扫打赏

微信扫一扫打赏

标签:

上一篇:

下一篇:

相关推荐

0 条评论关于"消灭浮动的要领有哪些【css教程】,float"

最新评论

    暂无留言哦~~

博客简介

看古风美女插画Cos小姐姐,素材合集图集打包下载:炫龙网,好看二次元插画应有尽有,唯美小姐姐等你来。

友情链接

他们同样是一群网虫,却不是每天泡在网上游走在淘宝和网游之间、刷着本来就快要透支的信用卡。他们或许没有踏出国门一步,但同学却不局限在一国一校,而是遍及全球!申请交换友链

服务热线:
 

 QQ在线交流

 旺旺在线