从品牌网站建设到网络营销策划,从策略到执行的一站式服务
这篇文章将为大家详细讲解有关css中如何清除浮动,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
目前创新互联已为数千家的企业提供了网站建设、域名、网页空间、网站运营、企业网站设计、江华网站维护等服务,公司将坚持客户导向、应用为本的策略,正道将秉承"和谐、参与、激情"的文化,与客户和合作伙伴齐心协力一起成长,共同发展。
清除浮动的方法有clearboth的方法、设置clearfix的方法、overflow的方法以及给父元素设置双伪元素的方法
在我们写代码的时候,有时因为使用了float浮动元素而导致页面中某些元素不能正确的显示。
浮动导致的后果:
(1)由于浮动元素脱离了文档流,所以父元素的高度无法被撑开,影响了与父元素同级的元素
(2)与浮动元素同级的非浮动元素会跟随其后,因为浮动元素脱离文档流不占据原来的位置
(3)如果该浮动元素不是第一个浮动元素,则该元素之前的元素也需要浮动,否则容易影响页面的结构显示
例:在一个div中设置三个div,让三个div的来撑开父元素
效果图:
加了float:left之后,父元素无法被撑开
清除浮动的方法
(1)使用clear:both清除浮动
在代码中在放一个空的div标签,然后给这个标签设置clear:both来清除浮动对页面的影响。它的优点是简单,方便兼容性好,但是一般情况下不建议使用该方法,因为会造成结构混乱,不利于后期维护
(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; }
关于css中如何清除浮动就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
成都网站建设公司地址:成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220
成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.
专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网! | 成都网站建设哪家好? | 网站建设地图