资讯

精准传达 • 有效沟通

从品牌网站建设到网络营销策划，从策略到执行的一站式服务

网站建设 >

查看其它板块

css中清除浮动的方法是什么

这篇文章将为大家详细讲解有关css中清除浮动的方法是什么，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

创新互联网站建设由有经验的网站设计师、开发人员和项目经理组成的专业建站团队，负责网站视觉设计、用户体验优化、交互设计和前端开发等方面的工作，以确保网站外观精美、成都网站建设、成都做网站易于使用并且具有良好的响应性。

浮动导致的后果：

（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:1pxsolid#ccc;background:#eff2f4;overflow:auto}

（4）双伪元素方法的使用

通过给父元素设置双伪元素来达到清除浮动的效果

.clearfix:before,.clearfix:after{

content:"";

display:block;

clear:both;

}

关于“css中清除浮动的方法是什么”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。


网页标题：css中清除浮动的方法是什么
文章位置：http://cdkjz.cn/article/pssscc.html
返回首页 了解更多建站资讯

相关资讯

多年建站经验

多一份参考，总有益处

联系快上网，免费获得专属《策划方案》及报价

咨询相关问题或预约面谈，可以通过以下方式与我们联系

大客户专线   成都：13518219792   座机：028-86922220

在线咨询 提交需求
友情链接 交换友情链接
成都模板网站网站运维托管成都免费网站建设成都响应式网站建设内江做网站重庆主机托管手机网站版本移动网站建设西信服务器托管成都免费建网站

成都网站建设公司地址：成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220

成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.

专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网！ | 成都网站建设哪家好？ | 网站建设地图