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)的滤镜来实现半透明 ...
随机推荐
- Haproxy官方文档翻译(第二章)配置Haproxy 附英文原文
2.配置 HAProxy 2.1 配置文件格式 Haproxy的配置过程包含了3部分的参数资源:- 命令行中的参数,此种参数总是享有优先权被使用- 配置文件中global节点中的参数,此种参数是进程范 ...
- 微服务化的大坑之一:当dubbo神器碰上共用注册中心和错误的暴露接口
dubbo是国内用比较多的微服务化系统,非侵入(意思就是说不用自己写代码,把xml配置好就可以用了,这个xml的引用注解就注在springboot的开启main类里面就可以了),提供好用的均衡和容错机 ...
- 如何在xlwt中编写多个列的单元格?
目的,写下面的表格: ---------------- | Long Cell | ---------------- | 1 | 2 | ---------------- 如果下面这样写: sheet ...
- mysql批量更新数据
CREATE PROCEDURE `sp_update_temp_data`( out po_returnvalue ) ) leave_top:BEGIN #Routine body goes he ...
- Tomcat每日报错
本次针对tomcat端口占用所产生的8080:8009:8000报错 1.打开CMD命令提示符(win+R). 2.输入指令netstat str -ano|findstr 8080(8080这里可以 ...
- BTrace:线上问题排查工具
BTrace简介 GitHub地址:BTrace 下载地址:v1.3.11.3 官方使用教程:Btrace使用教程 使用场景 BTrace 是一个事后工具,所谓事后工具就是在服务已经上线了,但是发现存 ...
- React.js小书总结
(迁移自旧博客2017 08 27) 第一阶段 react的组件相当于MVC里面的View. react.js 将帮助我们将界面分成了各个独立的小块,每一个块就是组件,这些组件之间可以组合.嵌套,就成 ...
- 关于win10环境下Anaconda python,用pip安装包及升级时SSL报错的问题
刚开始查完以为是网的问题,但是添加信任值\镜像网站\手动下载安装都失败了. 检查后发现python中无SSL模块,检查Anaconda后发现是少加了环境变量Anaconda3\Library\bin, ...
- PTA编程总结2—币值转换
7-1 币值转换 (20 分) 输入一个整数(位数不超过9位)代表一个人民币值(单位为元),请转换成财务要求的大写中文格式.如23108元,转换后变成"贰万叁仟壹百零捌"元.为了简 ...
- 基于卷积神经网络CNN的电影推荐系统
本项目使用文本卷积神经网络,并使用MovieLens数据集完成电影推荐的任务. 推荐系统在日常的网络应用中无处不在,比如网上购物.网上买书.新闻app.社交网络.音乐网站.电影网站等等等等,有人的地方 ...