详解为什么设置overflow为hidden可以清除浮动带来的影响
1.问题起源
在平时的业务开发写CSS中,为了满足页面布局,元素的浮动特性我们用的不能再多了。使用浮动的确能够解决一些布局问题,但是也带了一些副作用影响,比如,父元素高度塌陷,我们有好几种可以清除浮动的方法,最常用的就是设置父元素的overflow:hidden这个属性,每次在写代码的时候总是这样写,但是,自己从没深度思考过这些写为什么能够清除浮动,最近,自己也查阅了一些资料,谈谈自己的理解。
2.情景再现
先上代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>清除浮动</title>
<style>
.container{
border: 1px solid #000;
background: #0f0;
}
.child{
float: left;
}
</style>
</head>
<body>
<div class="container">
<div class="child">
你好
</div>
</div>
</body>
</html>
代码很简单,就是父元素container里面包含了一个子div元素child,然后我们使子元素的div向左浮动,结果来看,父元素只显示了四个方向边框的高度,背景颜色未显示,这是因为子元素浮动脱离文档流造成父元素高度塌陷。
3.解决方法
.container{
border: 1px solid #000;
background: #0f0;
overflow: hidden;
}
只在container父元素加了一行overflow:hidden
父元素高度被撑起来了,背景颜色也显示出来了。
4.BFC概念
我们先了解一个名词:BFC(block formatting context),中文为“块级格式化上下文”。
先记住一个原则: 如果一个元素具有BFC,那么内部元素再怎么翻江倒海,翻云覆雨,都不会影响外面的元素。所以,BFC元素是不可能发生margin重叠的,因为margin重叠会影响外面的元素的;BFC元素也可以用来清除浮动带来的影响,因为如果不清楚,子元素浮动则会造成父元素高度塌陷,必然会影响后面元素的布局和定位,这显然有违BFC元素的子元素不会影响外部元素的设定。
以下情况会触发BFC:
- <html>根元素
- float的值不为none
- overflow的值为auto,scroll,hidden
- display的值为table-cell,table-caption和inline--block中的任何一个
- position的值不为relative和static
显然我们在设置overflow值为hidden时使container元素具有BFC,那么子元素child浮动便不会带来父元素的高度坍塌影响。
利用BFC可以闭合浮动,防止与浮动元素重叠。
5.总结
设置overflow为hidden使元素具有BFC而不会受子元素的影响,但是当子元素过多需要滚动显示时,我们可以设置overflow的值为auto或acroll,超出父元素之外的元素会被隐藏。使用overflo:hidden也具有一定的局限性,所以我们应该根据具体的业务场景来选择合适的方法。
参考网址:
https://www.jb51.net/css/648048.html
https://blog.csdn.net/qq_41638795/article/details/83304388
https://www.cnblogs.com/GP-233/p/7140611.html
详解为什么设置overflow为hidden可以清除浮动带来的影响的更多相关文章
- 为什么设置overflow为hidden可以清除浮动带来的影响
1.问题起源 在平时的业务开发写CSS中,为了满足页面布局,元素的浮动特性我们用的不能再多了.使用浮动的确能够解决一些布局问题,但是也带了一些副作用影响,比如,父元素高度塌陷,我们有好几种可以清除浮动 ...
- CSS中为什么overflow:hidden能清除浮动(float)的影响?原理是什么?
http://www.zhihu.com/question/30938856 父块没有设置指定的高宽,当子块设置为浮动后,原本包裹子块的父块的高度塌陷消失,这时给父块设置overflow:hidden ...
- Linux服务器,服务管理--systemctl命令详解,设置开机自启动
Linux服务器,服务管理--systemctl命令详解,设置开机自启动 syetemclt就是service和chkconfig这两个命令的整合,在CentOS 7就开始被使用了. 摘要: syst ...
- NPOI2.2.0.0实例详解(十)—设置EXCEL单元格【文本格式】 NPOI 单元格 格式设为文本 HSSFDataFormat
NPOI2.2.0.0实例详解(十)—设置EXCEL单元格[文本格式] 2015年12月10日 09:55:17 阅读数:3150 using System; using System.Collect ...
- 详解PHP设置定时任务的实现方法
详解PHP设置定时任务的实现方法 一.总结 一句话总结: 1.ignore_user_abort(true)是什么意思? 无论客户端是否关闭浏览器,下面的代码都将得到执行 2.set_time_lim ...
- overflow:hidden的清除浮动效果
我们都知道"overflow:hidden"可以溢出隐藏,即当内容元素的高度大于其包含块的高度时,设置该属性即可把内容区域超出来的部分隐藏,使内容区域完全包含在该包含块中. 然而& ...
- 关于文本设置overflow:hidden后引起的垂直对齐问题
目前有这样的需求,一行标题中,前面为图标,后面是文字,文字要实现一行省略的效果 首先把文字设为:display: inline-block; 然后设置省略: overflow: hidden; wor ...
- [转载]Altium规则详解及设置
在Altium中进行PCB的设计时,经常会使用规则(Rule)来进行限定以确定线宽孔径等参数,此文将简要的介绍规则中的一些标量代表了什么. Electrical——电气规则.安全间距,线网连接等 Ro ...
- 【Android 界面效果20】Android GradientDrawable类的详解,设置activity的背景颜色渐变效果
看到这个例子的标题RoundRects,我的第一感觉是介绍RoundRectShape, 打开例子看了代码却是使用GradientDrawable来实现的. GradientDrawable 支持使用 ...
随机推荐
- Ionic4.x 中的button
官方文档:https://ionicframework.com/docs/api/button 1.ion-button 组件可以定义一个按钮 <ion-button>Default< ...
- PorterDuffXfermode之PorterDuff.Mode.LIGHTEN
package com.loaderman.customviewdemo.view; import android.content.Context; import android.graphics.B ...
- 自定义基于IFC数据的施工进度数据结构
<DataSource>D:/qlbz20190802.ifc</DataSource> <Datas> <Data> <ID></I ...
- Qt使用boost库
1.在官网下载boost库 boost_1_70_0.zip 2.将你的Qt的工具目录(有gcc.exe)设置环境变量.(比如F:\Qt592\Tools\mingw530_32\bin) 3.在命令 ...
- 处理线上CPU负载过高的故障现象
如何处理线上CPU100%的故障现象 处理流程: 1.登陆线上机器top命令,查看耗费cpu的进程号,举例来说发现进程24008持续耗费资源 2.top -Hp 24008去查看持续耗费cpu的线程号 ...
- 123457123457#0#-----com.yuming.drawGame01--前拼后广--儿童画画游戏
com.yuming.drawGame01--前拼后广--儿童画画游戏
- (错误)在VMmare中安装centos后不能联网
一.问题 在VMmare中安装centos后不能联网 在Xshell无法连接centos 二.解决方法 2.1 点击Network Adapter 设置如下图所示,首先我们在虚拟机中将网络配置设置成N ...
- (十二)会话跟踪技术之servlet通信(forward和include)
一.servlet通信方法 二.具体应用 scopeServlet.java protected void doPost(HttpServletRequest request, HttpServlet ...
- SLAM十四讲中Sophus库安装
Sophus截止目前有很多版本,其中大体分为两类,一种是用模板实现的方法,一种是用非模板类实现的,SLAM十四讲中使用的是非模板类库,clone Sophus: git clone http://gi ...
- Docker 镜像的推送(六)
目录 一.为镜像命名 二.推送到官方 Docker Hub 1.首先得在 Docker Hub 上注册一个账号. 2.在 Docker Host 上登录 3.修改镜像命名 4.镜像上传 5.登录查看上 ...