css--父元素塌陷
当父元素内都是漂浮元素时,会造成父高度塌陷的问题。(因为等同于父元素内容为空,所以长,宽都等于空)
我们想要的页面结构是:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.son1{
width: 100px;
height: 100px;
background-color: red;
float: left;
}
.son2{
width: 100px;
height: 100px;
background-color: green;
float: left;
}
.p2{
width: 100%;
height: 100px;
background-color: yellow;
}
</style>
</head>
<body>
<div class="p1">
<div class="son1"></div>
<div class="son2"></div>
</div>
<div class="p2"></div>
</body>
</html>
父元素塌陷
这时候,我们想既然父元素为空,导致了高度塌陷,那么就给父元素填充点文本内容。
<div class="p1">123
<div class="son1"></div>
<div class="son2"></div>
</div>
虽然黄色模块向下移动了,但是并没有达到我们想要的效果。我们想给父元素设置一个固定的长度和宽带。
<div class="p1" style="height: 100px;width: 100%">
<div class="son1"></div>
<div class="son2"></div>
</div>
看效果,已经达到我们预期了。但是这个解决方案真的好吗?答案明显是否定的。当悬浮模块大小发生改变时,我们需要再手动更改父元素的长宽,这十分不方便。
这时候,我们想到了clear,他会让元素周边不会有悬浮元素,可以达到块标签的效果。
我们需要先在父元素中创建一个空白块元素(div)。再给他设置clear属性。就可以达到效果了
<div class="p1">
<div class="son1"></div>
<div class="son2"></div>
<div style="clear: both"></div>
</div>
css--父元素塌陷的更多相关文章
- after及before伪元素及解决父元素塌陷的几种方法
一.伪类和伪元素 CSS中伪类和伪元素有很多,也很好用!如果熟练使用的话可以解决很多问题 首先明白什么是伪类:伪类是基于当前元素的状态,而不是元素的id class等静态标志,它是动态变化的,它会在一 ...
- CSS父元素高度随子元素高度变化而变化
<html> <body> <head> <style> #menu{width:1000px;overfloat:hidden;} /* width: ...
- css父元素背景覆盖其子元素背景
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- css父元素透明度(opacity)对子元素的影响
首先子元素会继承父元素的透明度: 设置父元素opacity:0.5,子元素不设置opacity,子元素会受到父元素opacity的影响,也会有0.5的透明度. 其次子元素的透明度是基于父元素的透明度计 ...
- css float父元素高度塌陷
css float父元素高度塌陷 float 使父元素高度塌陷不是BUG,反而是标准. float 原本是为了解决文字环绕才出现的. 当然有的时候要解决高度塌陷的问题 以下几个方法可以解决float ...
- CSS关于子元素设置了float属性后父元素高度为0的解释和解决方法
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/stri ...
- CSS中模拟父元素选择器
很多情况下,我们需要找到父元素,但可惜的是css中并没有这样的一个选择器. 至于原因可以看张鑫旭的如何在CSS中实现父选择器效果这篇文章. 简单来说这个实现并不是真正的父元素选择器,只是利用其它思路来 ...
- css设置时父元素随子元素margin值移动
父元素的盒子包含一个子元素盒子,给子元素盒子一个垂直外边距margin-top,父元素盒子也会往下走margin-top的值,而子元素和父元素的边距则没有发生变化. HTML,CSS: <div ...
- CSS实现父元素半透明,子元素不透明
CSS实现父元素半透明,子元素不透明. 很久以来大家都习惯使用opacity:0.5在新式浏览器里实现半透明,而对IE较旧的版本使用filter:Alpha(opacity=0.5)的滤镜来实现半透明 ...
随机推荐
- 自动弹出pickerview
UIPickerView是开发中常用的控件,日期选择.年龄选择.城市的多级联动等等都会使用,它一般是在点击某个按钮后出现,展现方式和UITextView一样,从页面底部弹出,选中后或者点击控件以外区域 ...
- python文件读书笔记
一.打开文件 1 f=open('text.txt',r) 二.读取文件 print(f.read) 三.关闭文件 f.close() 比较好用的是运用with with open('text.tx ...
- Got error on conf /etc/mha/app1.cnf: Parameter name master_ip_failover_scrip is invalid!
问题: [root@db03-53 ~]# masterha_check_repl --conf=/etc/mha/app1.cnf Tue Apr 2 20:24:58 2019 - [warnin ...
- mongodb常用查询语句
1.查询所有记录db.userInfo.find();相当于:select* from userInfo; 2.查询去掉后的当前聚集集合中的某列的重复数据db.userInfo.distinct(&q ...
- ASP.NET Core API 接收参数去掉烦人的 [FromBody]
在测试ASP.NET Core API 项目的时候,发现后台接口参数为类型对象,对于PostMan和Ajax的Post方法传Json数据都获取不到相应的值,后来在类型参数前面加了一个[FromBody ...
- mybatis-ehcache整合中出现的异常 ibatis处理器异常(executor.ExecutorException)解决方法
今天学习mabatis时出现了,ibatis处理器处理器异常,显示原因是Executor was closed.则很有可能是ibatis的session被关闭了, 后面看了一下测试程序其实是把sqlS ...
- 13_文件系统访问列表_case语句及脚本选项
FACL:Filesystem Access Control List利用文件扩展保存额外的访问控制权限 setfacl: -m:设定 u:UID:perm g:GID:perm root@kali: ...
- leetcode02大数相加
惭愧惭愧,这道题居然卡了两天,犯了一堆错误,现在一一总结 错误 头一天我看给的测试用例误以为输入是数组,做了半天也无法输出链表的正确格式,后来把输入当成链表,才正确了 我没看到编辑器给了一套链表,自己 ...
- MySQL的随机数函数rand()的使用技巧
咱们学php的都知道,随机函数rand或mt_rand,可以传入一个参数,产生0到参数之间的随机整数,也可以传入两个参数,产生这两个参数之间的随机整数. 而在mysql里,随机数函数rand不能传参, ...
- 《Professional JavaScript for Web Developers》day02
<Professional JavaScript for Web Developers>day02 1.在HTML中使用JavaScript 1.1 <script>元素 HT ...