清除浮动(解决高度坍塌的问题)的方法5种
高度坍塌的根源
常规流盒子的自动高度,在计算时,不会考虑浮动盒子
如果父盒子没有给高度,但是里面的子元素浮动,或者绝对定位,固定定位,都会使这个子元素脱离文档流,使父元素不能够获取元素的高,也就是不能自适应子元素的高了,既然不能自适应子元素的高了,那么父元素的高就是0,那么后面的元素自然 就跑上来了。
方法一:给浮动元素的父辈容器添加高度
缺点: 需要手动添加高度, 如何后面子元素的高度发生变化之后,还行再次修改父辈的高度, 给后期的维护带来麻烦.
优点: 简单粗暴直接有效
<style>*{padding:0;margin: 0;}.box1{width: 1700px;height: 100px;background-color: lightseagreen;}.box1>div{float: left;width: 200px;height: 100px;background-color: lightcoral;border: lightgreen solid 2px;}.box2{width: 100px;height: 100px;background-color: red;}</style>
<body><div class="box1"><div></div><div></div><div></div><div></div></div><div class="box2"></div>
</body>
这种方法很简单,就是浮动元素需要多少高度,就给它的父元素设置多少高度,虽然好使,但是不够灵活。
方法二:使用清除属性clear
清除浮动,涉及css属性:clear
- 默认值:none
- left:清除左浮动,该元素必须出现在前面所有左浮动盒子的下方
- right:清除右浮动,该元素必须出现在前面所有右浮动盒子的下方
- both:清楚左右浮动,该元素必须出现在前面所有浮动盒子的下方
clear属性的含义是避免前面的浮动元素对自己的影响. 所以, 谁不想让别人影响自己, 就添加到谁身上.
<style>.contianer{background-color: deepskyblue;}.item{float: left;width: 50px;height: 50px;background-color: forestgreen;border: gold solid 1px;}.end{clear: both; /* 处理高度坍塌的问题*/}</style>
<body>
<div class="contianer"><div class="item"></div><div class="item"></div><div class="item"></div><div class="end"></div>
</div>
</body>
这种方法的特点就是我们专门设置了一个空盒子来撑起父元素的高度
优点:简单、代码少、浏览器支持好、不容易出现怪问题
缺点:如果页面浮动布局多,就要增加很多空div,让人感觉很不好
建议:不推荐使用,但此方法是以前主要使用的一种清除浮动方法
方法三:使用 after 伪元素清除浮动,给父元素添加 clearfix
给一个元素添加一个:after则相当于给这个元素添加了子元素, 而且这个子元素会是他的最后一个儿子.
该样式在clearfix,即父级元素的最后,添加了一个:after伪元素,通过清除伪元素的浮动,达到撑起父元素高度的目的
。注意到该伪元素的display值为block,即,它是一个不可见的块级元素(有的地方使用table,因为table也是一个块级元素)。
<style>.contianer{background-color: deepskyblue;padding: 30px;}.item{width: 50px;height: 50px;background-color: forestgreen;border: gold solid 1px;float: left;}.clearfix::after{content: "";display: block; /*插入伪元素是行内元素,要转化为块级元素*/clear: both;}.clearfix{*zoom:1;} /* *只有IE6,7识别 */</style>
<body>
<div class="contianer clearfix"><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div>
</div>
</body>
原理:after是在父元素中加一个盒子,这个元素是通过css添加上去的,符合闭合浮动思想,结构语义化正确。
父元素中加一个类名为clearfix 。但是这个方法IE6-IE7不识别,要进行兼容,使用zoom:1触发hasLayout来清除浮动
方法四:给父级元素添加overflow:hidden,创建 bfc
<style>.box1{width: 200px;background-color: aqua;overflow: auto; /* 这里的auto可以是除了visible之外的其他值 */}.box1>div{float: left;width: 50px;height: 50px;background-color: brown;}footer{width: 200px; height: 100px;background-color: coral;clear: both;}.box2{width: 200px;height: 100px;background-color: chartreuse;}
</style>
<body><div class="box1"><div></div><div></div><div></div><footer></footer></div><div class="box2"></div>
</body>
仅仅只在父级元素上添加了一个值为auto的overflow属性,父元素的高度立即被撑起,将浮动元素包裹在内。看起来,浮动被清除,浮动不再会影响到后续元素的渲染(严格讲,这和清除浮动没有一点关系,因为不存在哪个元素的浮动被清除)。
其实,这里的overflow值,还可以是除了"visible"之外的任何有效值,它们都能达到撑起父元素高度,清除浮动的目的。
当元素设置了overflow样式,且值不为visible时,该元素就建构了一个BFC
按照BFC的特点,BFC的高度是要包括浮动元素的,所以父元素的高度被撑起来,达到了清除浮动影响的目的。
方法五:使用 before 和 after 双伪元素清除浮动
<style>.box1{width: 300px;background: cyan;}.box1>div{width: 70px;height: 100px;background-color: yellow;float: left;}.clearfix{*zoom: 1;}.clearfix::before,.clearfix::after{content: '';display: block;clear: both;}
</style>
<body>
<div class="box1 clearfix"><div></div><div></div><div></div>
</div>
</body>
这种方法完全符合闭合浮动思想。给父元素加一个类名为clearfix,需要兼容IE6-IE7
清除浮动(解决高度坍塌的问题)的方法5种相关推荐
- html盒子模型子元素怎么水平占满父元素_CSS盒子模型、溢出处理、浮动、高度坍塌问题...
盒子模型 1.内容区 width 盒子内容区宽度 height 盒子内容区高度 background-color 背景颜色 盒子可见大小由内容区,内边距和边框共同决定 为元素设置边框,必须指定3个样式 ...
- 常见的几种清除浮动(高度塌陷)的方法?
常见的几种清除浮动(高度塌陷)的方法? 我们经常把解决高度塌陷问题叫做清除浮动. 高度塌陷问题------指父元素高度自适应(即父元素不设置高度或高度为auto,这时的父元素就靠子元素来撑开),子元素 ...
- (08)2020-12-10(清除浮动/解决父类塌陷问题、定位问题、ifont图标)
清除浮动/解决父类塌陷问题.ifont图标 一.清除浮动 1,父类塌陷产生原因 2,解决方法(不推荐,只做了解) 3,解决方法 1, css的伪元素,是指他们不是真正的页面元素.html中并没有对应的 ...
- 清除浮动(高度塌陷)的方法及原理!
为什么要清除浮动? (清除浮动主要是为了解决,父元素因为子级元素浮动引起的内部高度为0的问题) 1.如下,我给父盒子设置一个boder,内部放两个盒子一个big 一个small,未给big和small ...
- html清除溢出,深入理解CSS overflow:hidden——溢出,坍塌,清除浮动
overflow:hidden是overflow属性的一个神奇用法,它可以帮助我们隐藏溢出的元素,清除浮动和解除坍塌.当某一个属性拥有这么多的功能时,难免使人难以把握,不过不要怕,只要信:看完这篇文章 ...
- 深入理解:overflow:hidden——溢出,坍塌,清除浮动
深入理解:overflow:hidden--溢出,坍塌,清除浮动 overflow:hidden是overflow属性的一个神奇用法,它可以帮助我们隐藏溢出的元素,清除浮动和解除坍塌.当某一个属性拥有 ...
- 前端面试题-clearfix(清除浮动)
一.浮动的概念 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止. 由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样. 二.浮动的影响 1. ...
- CSS——如何清除浮动
众所周知,平时在写HTML代码时,难免少不了使用Float样式,这样一来,假使您没有清除浮动,那么有浮动元素的父元素容器将元素将无法自动撑开.换句简单好理解的话来说,假如你在写CODE时,其中div. ...
- 清除浮动塌陷的4种经典套路
[自古深情留不住,总是套路得人心.] 这些日子,各个朋友圈随时可以见到这句话的身影.的确人们常说:"多一点真诚,少一点套路.",但是最终现象写实也是那么残酷和无奈. 同样在前端攻城 ...
- [Web 前端] 018 css 清除浮动的四种方法
清除浮动的四种方法 加 clear: ...(见例1) 父级上增加属性 overflow:hidden(见例2.1) 在最后一个子元素的后面加一个空的 div,给它一个样式属性 clear: both ...
最新文章
- Application 类 简介
- oracle恢复库覆盖原来的库,oracle如何恢复被覆盖的存储过程
- python中seaborn画swarm图_Python可视化 | Seaborn5分钟入门(四)——stripplot和swarmplot
- @Configuration 和 @Component 区别
- web安全day39:渗透测试方法论
- (转)孙正义:数字资产会成为人类最大的资产
- 分布式日志收集系统实践(视频教程)
- 几行Java解决图片提取文字功能
- 环路供电和继电保护的含义
- 2019年ArcGIS JavaScript API 4.x添加天地图矢量地图(球面墨卡托)
- 本地配置微信H5测试
- 笔记本重装win10系统
- WTL 自绘控件库 (CQsCheckBox)
- C++ Reference: Standard C++ Library reference: C Library: cstdio: fprintf
- Java之切割时间段
- 一文读懂什么是cookie和session。
- oracle中怎么判断为周五,求一年中所有星期五的日期
- C#-- 控制台操作
- 移动Web实训DAY-2
- phonegap入门--4 Camera 摄像头
热门文章
- Mesh Baker的基本操作与功能演示
- 离线强化学习(Offline RL)系列3: (算法篇) TD3+BC 算法详解与实现(经验篇)
- 有哪些好用且免费的安全测试工具?
- rdl报表 mysql_SSRS报表服务随笔(rdl报表服务)-报表参数
- 为什么银行的现钞买入价低于现汇买入价?
- 安卓图片三级缓存策略与实现
- Java Blend_Expression Blend的替代品[关闭]
- 微信小程序-001-抽签功能-000-目录概要
- byte 16进制 2进制理解
- python sample函数