怎么用CSS清除浮动-创新互联

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

创新互联长期为上千客户提供的网站建设服务，团队从业经验10年，关注不同地域、不同群体，并针对不同对象提供差异化的产品和服务；打造开放共赢平台，与合作伙伴共同营造健康的互联网生态环境。为吉林企业提供专业的网站建设、做网站，吉林网站改版等技术服务。拥有10年丰富建站经验和众多成功案例,为您定制开发。

css出现清除浮动的问题的原因：在标准流下面，父元素没有设置高度属性，且父元素中的子元素是浮动，由于浮动元素不再占用原文档流的位置，浮动元素的高度不会计算在父元素的高度中，即呈现塌陷的状态。

一、为什么会出现清除浮动的问题？

（学习视频推荐：java视频教程）

如果在标准流下面一个父元素没有设置高度属性,那么它的高度就会被子元素的高度撑开，即自适应。但是如果这个父元素中的子元素是浮动的话，由于浮动元素不再占用原文档流的位置，浮动元素的高度不会计算在父元素的高度中，父元素的高度会为0，即呈现塌陷的状态。我们为了解决这类问题，提出了清除浮动。

二、怎么用CSS清除浮动？

1、直接给父元素添加高度

但是在浮动元素高度不确定的时候不适用

2、直接利用clear：both

直接在父元素的最底下添加一个块级标签（p,div等），然后赋予它clear：both 来清除浮动。

但是这样会产生大量没有用的空元素，浪费资源，不是最优解

3、利用BFC：

（1）什么是BFC

直译为"块级格式化上下文"。它是一个独立的渲染区域，是一个独立的布局环境，其中的元素布局是不受外界的影响，并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。

（2）解决方案一：

给父元素样式添加overflow：hidden（只要不是visible），添加这个语句后，会创建一个BFC，会把浮动元素困在BFC中，不让其脱离文档流，会先计算浮动元素的高度，再hidden隐藏，父元素获得高度，就会撑开

（3）解决方案二：

给父元素添加浮动float：right（只要不是none），添加这个语句也会创建一个BFC，原理相同，但是有时候我们不需要让父元素浮动，与我们的需求相违背

4、利用伪类

通过父元素的::after伪元素来生成浮动元素的兄弟元素，然后兄弟元素使用clear:both方法。

关于怎么用CSS清除浮动就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容