首页 > web前端 > css教程 > 正文

css为什么会出现清除浮动的问题

王林
发布: 2020-11-30 15:41:10
原创
1972 人浏览过

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

css为什么会出现清除浮动的问题

本教程操作环境:windows10系统、css3,本文适用于所有品牌的电脑。

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

(学习视频推荐: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教程

以上是css为什么会出现清除浮动的问题的详细内容。更多信息请关注PHP中文网其他相关文章!

相关标签:
来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板