CSS:元素塌陷问题

2019独角兽企业重金招聘Python工程师标准>>> hot3.png

描述:
在文档流中,父元素的高度默认是被子元素撑开的,也就是子元素多高,父元素就多高。但是当子元素设置浮动之后,子元素会完全脱离文档流,此时将会导致子元素无法撑起父元素的高度,导致父元素的高度塌陷。

1.给父元素加高度;问题:当子盒子的高度大于父盒子时,会溢出;

2父元素触发BFC

根据W3C标准,在页面中元素都有一个隐藏的属性叫Block Formatting Context,简称BFC,该属性可以设置打开或者关闭,默认是关闭的。

当开启BFC后,元素将会具有以下特性:

  • 元素的垂直外边距不会和子元素重叠
  • 开启BFC的元素不会被浮动元素所覆盖
  • 开启BFC的元素可以包含浮动元素

触发BFC(给父级加),满足下面任意一种即可:

Float的值不是none;带来的问题:父级元素的父级元素宽度为0)

position的值不是static/relative;(带来的问题:父级元素的父级元素宽度为0)

display的值为:inline-block;table-cell;

overflow的值不是visible;(带来的问题:IE6下不支持)

3.(最佳方案)给父级元素加class=Clearfix(固定的名字)

.clearfix::after{
    content: '';
    display: block;
    clear: both;
}

4.添加一个高度和宽度为0的div,作为子元素,并且清除浮动(可以兼容各种浏览器,但是会多一个无用的标签)

 

转载于:https://my.oschina.net/u/4045971/blog/3016903

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/388143.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Celery介绍及常见错误

celery 情景:用户发起request,并等待response返回。在本些views中,可能需要执行一段耗时的程序,那么用户就会等待很长时间,造成不好的用户体验,比如发送邮件、手机验证码等。 使用celery后,情况…

python dash_Dash是Databricks Spark后端的理想基于Python的前端

python dash📌 Learn how to deliver AI for Big Data using Dash & Databricks this recorded webinar with Peter Kim of Plotly and Prasad Kona of Databricks.this通过Plotly的Peter Kim和Databricks的Prasad Kona的网络研讨会了解如何使用Dash&#xff06…

Eclipse 插件开发遇到问题心得总结

Eclipse 插件开发遇到问题心得总结 Posted on 2011-07-17 00:51 季枫 阅读(3997) 评论(0) 编辑 收藏1、Eclipse 中插件开发多语言的实现 为了使用 .properties 文件,需要在 META-INF/MANIFEST.MF 文件中定义: Bundle-Localization: plugin 这样就会…

在Python中查找子字符串索引的5种方法

在Python中查找字符串中子字符串索引的5种方法 (5 Ways to Find the Index of a Substring in Strings in Python) str.find() str.find() str.rfind() str.rfind() str.index() str.index() str.rindex() str.rindex() re.search() re.search() str.find() (str.find()) …

Eclipse 插件开发 向导

阅读目录 最近由于特殊需要,开始学习插件开发。   下面就直接弄一个简单的插件吧!   1 新建一个插件工程   2 创建自己的插件名字,这个名字最好特殊一点,一遍融合到eclipse的时候,不会发生冲突。   3 下一步,进…

线性回归 假设_线性回归的假设

线性回归 假设Linear Regression is the bicycle of regression models. It’s simple yet incredibly useful. It can be used in a variety of domains. It has a nice closed formed solution, which makes model training a super-fast non-iterative process.线性回归是回…

solo

solo - 必应词典 美[soʊloʊ]英[səʊləʊ]n.【乐】独奏(曲);独唱(曲);单人舞;单独表演adj.独唱[奏]的;单独的;单人的v.独奏;放单飞adv.独网络梭罗;独奏曲;索罗变形复数&#xff1…

Eclipse 简介和插件开发天气预报

Eclipse 简介和插件开发 Eclipse 是一个很让人着迷的开发环境,它提供的核心框架和可扩展的插件机制给广大的程序员提供了无限的想象和创造空间。目前网上流传相当丰富且全面的开发工具方面的插件,但是 Eclipse 已经超越了开发环境的概念,可以…

趣味数据故事_坏数据的好故事

趣味数据故事Meet Julia. She’s a data engineer. Julia is responsible for ensuring that your data warehouses and lakes don’t turn into data swamps, and that, generally speaking, your data pipelines are in good working order.中号 EETJulia。 她是一名数据工程…

Linux 4.1内核热补丁成功实践

最开始公司运维同学反馈,个别宿主机上存在进程CPU峰值使用率异常的现象。而数万台机器中只出现了几例,也就是说万分之几的概率。监控产生的些小误差,不会造成宕机等严重后果,很容易就此被忽略了。但我们考虑到这个异常转瞬即逝、并…

python分句_Python循环中的分句,继续和其他子句

python分句Python中的循环 (Loops in Python) for loop for循环 while loop while循环 Let’s learn how to use control statements like break, continue, and else clauses in the for loop and the while loop.让我们学习如何在for循环和while循环中使用诸如break &#xf…

eclipse plugin 菜单

简介: 菜单是各种软件及开发平台会提供的必备功能,Eclipse 也不例外,提供了丰富的菜单,包括主菜单(Main Menu),视图 / 编辑器菜单(ViewPart/Editor Menu)和上下文菜单&am…

python数据建模数据集_Python中的数据集

python数据建模数据集There are useful Python packages that allow loading publicly available datasets with just a few lines of code. In this post, we will look at 5 packages that give instant access to a range of datasets. For each package, we will look at h…

打开editor的接口讨论

【打开editor的接口讨论】 先来看一下workbench吧,workbench从静态划分应该大致如下: 从结构图我们大致就可以猜测出来,workbench page作为一个IWorkbenchPart(无论是eidtor part还是view part&#…

网络攻防技术实验五

2018-10-23 实验五 学 号201521450005 中国人民公安大学 Chinese people’ public security university 网络对抗技术 实验报告 实验五 综合渗透 学生姓名 陈军 年级 2015 区队 五 指导教师 高见 信息技术与网络安全学院 2018年10月23日 实验任务总纲 2018—2019 …

usgs地震记录如何下载_用大叶草绘制USGS地震数据

usgs地震记录如何下载One of the many services provided by the US Geological Survey (USGS) is the monitoring and tracking of seismological events worldwide. I recently stumbled upon their earthquake datasets provided at the website below.美国地质调查局(USGS)…

Springboot 项目中 xml文件读取yml 配置文件

2019独角兽企业重金招聘Python工程师标准>>> 在xml文件中读取yml文件即可&#xff0c;代码如下&#xff1a; 现在spring-boot提倡零配置&#xff0c;但是的如果要集成老的spring的项目&#xff0c;涉及到的bean的配置。 <bean id"yamlProperties" clas…

无法获取 vmci 驱动程序版本: 句柄无效

https://jingyan.baidu.com/article/a3a3f811ea5d2a8da2eb8aa1.html 将 vmci0.present "TURE" 改为 “FALSE”; 转载于:https://www.cnblogs.com/limanjihe/p/9868462.html

数据可视化 信息可视化_更好的数据可视化的8个技巧

数据可视化 信息可视化Ggplot is R’s premier data visualization package. Its popularity can likely be attributed to its ease of use — with just a few lines of code you are able to produce great visualizations. This is especially great for beginners who are…

分布式定时任务框架Elastic-Job的使用

为什么80%的码农都做不了架构师&#xff1f;>>> 一、前言 Elastic-Job是一个优秀的分布式作业调度框架。 Elastic-Job是一个分布式调度解决方案&#xff0c;由两个相互独立的子项目Elastic-Job-Lite和Elastic-Job-Cloud组成。 Elastic-Job-Lite定位为轻量级无中心化…