float浮动导致父元素高度坍塌的原因及清除浮动方法
一、浮动产生原因
一般浮动是什么情况呢?一般是一个盒子里使用了CSS float浮动属性,导致父级对象盒子不能被撑开,这样CSS float浮动就产生了。
本来两个黑色对象盒子是在红色盒子内,因为对两个黑色盒子使用了float浮动,所以两个黑色盒子产生了浮动,导致红色盒子不能撑开,这样浮动就产生了。
简单地说,浮动是因为使用了float:left或float:right或两者都是有了而产生的浮动。
二、浮动产生负作用
1、背景不能显示
由于浮动产生,如果对父级设置了(CSS background背景)CSS背景颜色或CSS背景图片,而父级不能被撑开,所以导致CSS背景不能显示。
2、边框不能撑开
如上图中,如果父级设置了CSS边框属性(css border),由于子级里使用了float属性,产生浮动,父级不能被撑开,导致边框不能随内容而被撑开。
3、margin padding设置值不能正确显示
由于浮动导致父级子级之间设置了css padding、css margin属性的值不能正确表达。特别是上下边的padding和margin不能正确显示。
三、css解决浮动,清除浮动方法
1、对父级设置适合CSS高度
对父级设置适合高度样式清除浮动,使用设置高度样式,清除浮动产生,前提是对象内容高度要能确定并能计算好。
弊端:必须要知道父元素高度是多少
2、设置父元素也浮动
弊端:对后续元素会带来位置的影响
3、父级div定义 overflow:hidden
对父级CSS选择器加overflow:hidden样式,可以清除父级内使用float产生浮动。优点是可以很少CSS代码即可解决浮动产生。
为什么加入overflow:hidden即可清除浮动呢?那是因为overflow:hidden属性相当于是让父级紧贴内容,这样即可紧贴其对象内内容(包括使用float的div盒子),从而实现了清除浮动。Css overflow:hidden清除浮动方法DIVCSS5推荐使用。
弊端:如果有内容要以溢出的方式显示的话,也一同被隐藏了。
4、clear:both清除浮动
在父元素中,追加空子级块级元素,并设置其clear属性值为 both 。
这个css clear清除float产生浮动,可以不用对父级设置高度 也无需技术父级高度,方便适用,但会多加CSS和HTML标签。
5、利用CSS3新属性完美解决
css样式表中新加:
1
2
3
4
5
|
.clear:after{ content:""; display:block; clear:both; } |
然后在需要清除浮动的元素上引入.clear类: class="clear"
此方法几乎没有弊端,推荐使用。
float浮动导致父元素高度坍塌的原因及清除浮动方法的更多相关文章
- CSS关于子元素设置了float属性后父元素高度为0的解释和解决方法
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
- HTML 文档流,设置元素浮动,导致父元素高度无法自适应的解决方法(高度欺骗)
元素浮动定义 float 属性定义元素在哪个方向浮动.以往这个属性总应用于图像,使文本围绕在图像周围,不过在 CSS 中,任何元素都可以浮动.浮动元素会生成一个块级框,而不论它本身是何种元素. 如果浮 ...
- 解决 css 浮动后 父元素高度失效问题
应用场景 子元素标签使用 浮动后,会出现浮在父元素上层,脱离了.导致父元素没办法根据子元素的高度而变化,提供以下解决方案. 解决代码 把 '.clearfix ' Class 样式添加到 父元素即可. ...
- 关于子元素的margin-top溢出和元素浮动对父元素高度影响解决方案
以下是个人学习笔记,仅供学习参考. 1.关于子元素的margin-top作用在无margin-top-border的父元素上导致子元素的margin-top溢出问题. 在给没有margin-top-b ...
- css 添加伪元素 消除浮动 对父元素高度产生的影响
- float浮动问题:会造成父级元素高度坍塌;
float浮动问题:会造成父级元素高度坍塌: 解决办法:清除浮动:clear:both; 给父元素高度:height(不是很可取) 给父元素:display:inline-black:(问题:marg ...
- 解决float浮动带来的父元素高度没有的问题---清除浮动
float的特性 : 1:使元素block块级化: 2:破坏性造成的紧密排列特性. 基于以上的特性,使得我们通常把浮动用来布局,带来的问题是,容易出问题,重用性不行,ie6-的版本下很多问题,因为它是 ...
- css float父元素高度塌陷
css float父元素高度塌陷 float 使父元素高度塌陷不是BUG,反而是标准. float 原本是为了解决文字环绕才出现的. 当然有的时候要解决高度塌陷的问题 以下几个方法可以解决float ...
- 子div设置float后导致父div无法自动撑开的问题
子div设置float后会导致父div无法自动撑开 原因:内部的DIV因为float:left之后,就丢失了clear:both和display:block的样式,所以外部的DIV不会被撑开. 以下是 ...
随机推荐
- maven将自己的springboot项目打包成jar包后,作为工具包引入其他项目,找不到jar中的类
将springboot项目打包成jar包,作为工具包导入项目后,找不到jar中的类. 原因是:springboot项目使用了自动的打包插件. 原先的插件配置: <build> <pl ...
- 双屏显示——NW.js
1.利用w10中的双屏显示设置(扩展模式) 2.Code for second window: var gui = require('nw.gui'); gui.Screen.Init(); win ...
- 关于img标签浏览器自带的边框,清除边框的解决方式(即img[src=""] img无路径情况下,灰色边框去除解决方法)
详解img[src=""] img无路径情况下,灰色边框去除解决方法 1.Js解决办法 <html> <head> <meta charset=&qu ...
- Jenkins Pipeline 语法
Pipeline语法 先讲Declarative Pipeline,所有声明式管道都必须包含在pipeline块中: 123 pipeline { /* insert Declarative Pipe ...
- MyBatis框架原理3:缓存
上一篇[MyBatis框架原理2:SqlSession运行过程][1]介绍了MyBatis的工作流程,其中涉及到了MyBatis缓存的使用,首先回顾一下工作流程图: 如果开启了二级缓存,数据查询执行过 ...
- docker 安装 gitlab 中文社区版
docker pull twang2218/gitlab-ce-zh 创建一个docker 目录 /usr/local/docker/gitlab 创建一个 docker-compose.yml ve ...
- 1.2.2 OSI参考模型 下
[今天打酱油了,纯抄书.OSI太重要,不敢随便乱写.] 一.开放系统互联参考模型 答:20世纪80年代初,ISO提出来著名的开放系统互联参考模型[Open Systems Interconnectio ...
- hue数据导出
1/ 执行要下载的sql语句 2/ 执行完成后,点击下面导出 3.选择所有 4.选择每个人对应的文件夹,没有自己名称的可以创建一个 5.选择导出 6.右面是导出执行时的界面 7.选择已经执行的文件 ...
- JavaScript学习总结(一)——闭包、对象、函数
一.闭包(Closure) 1.1.闭包相关的问题 请在页面中放10个div,每个div中放入字母a-j,当点击每一个div时显示索引号,如第1个div显示0,第10个显示9:方法:找到所有的div, ...
- 分库分表之后全局id咋生成?
1.面试题 分库分表之后,id主键如何处理? 2.面试官心里分析 其实这是分库分表之后你必然要面对的一个问题,就是id咋生成?因为要是分成多个表之后,每个表都是从1开始累加,那肯定不对啊,需要一个全局 ...