CSS高度塌陷问题与解决办法
问题描述：
在文档流中，父元素默认被子元素撑开（父多高子多高），一旦子浮动，脱离文档流，父无撑起元素便塌陷，父下的所有元素会上移。
（不推荐）可以将父高度写死避免塌陷，但高度写死后，父高度不能自动适应子高度的变化。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>高度塌陷问题</title>
<style type="text/css">
.father{
border: 1px solid red;
}
.son{
width: 100px;
height: 100px;
background-color: greenyellow;
float: left;
/*设置浮动后由于子脱离文档流父子后重叠*/
}
.duiBi{
width: 1000px;
height: 100px;
background-color: pink;
}
</style>
</head>
<body>
<div class="father">
<div class="son">
</div>
</div>
<div class="duiBi">
</div>
</body>
</html>
解决方案一：
CSS高度塌陷问题与解决办法的更多相关文章
- CSS浮动布局带来的高度塌陷以及其解决办法
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="U ...
- CSS高度坍塌原因及解决办法
在文档流中,父元素的高度默认是被子元素撑开的,也就是子元素多高,父元素就多高. 但是当为子元素设置浮动以后,子元素会完全脱离文档流,此时将会导致子元素无法撑起父元素的高度,导致父元素的高度塌陷.由于父 ...
- ScrollView嵌套ListView只显示一行之计算的高度不正确的解决办法(转)
ScrollView嵌套ListView只显示一行之计算的高度不正确的解决办法 分类: android应用开发2013-12-19 09:40 1045人阅读 评论(3) 收藏 举报 AndroidS ...
- CSS高度塌陷
问题描述:当父元素只包含浮动的元素的时候,且父元素没有设置高度,如果父元素设置了边框border,那么看起来子元素不在父元素之内. 比如这样: html: <div id="paren ...
- 关于canvas画布使用fillRect()时高度出现双倍效果解决办法
当设置canvas的宽度和高度时,只有内嵌css有效,外部css会出现拉伸的情况,例如: <!DOCTYPE html> <html lang="en"> ...
- CSS常见兼容问题以及解决办法
浏览器的兼容性问题,通常是因为不同的浏览器对同一段代码有不同的解析,造成页面显示不统一的情况. 这里谈到的浏览器,主要指IE6/IE7/IE... FireFox Chrome Opera Safar ...
- CSS高度塌陷问题解决方案
高度塌陷的存在:原因分析 1 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /& ...
- css 浏览兼容问题及解决办法 （2）
1.div的垂直居中问题 vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了.缺点是要控制内容不要换行 2. ...
- 当display=none时，元素和子元素高度为0的解决办法
在前端中为了某种需要,我们需要获取display=none的元素或者子元素的实际高度来进行某些处理,然而html对display=none的元素和子元素是不进行渲染的,如果我们没有规定这些元素的高度那 ...
随机推荐
- [深度应用]·DC竞赛轴承故障检测开源Baseline（基于Keras 1D卷积 val_acc:0.99780）
[深度应用]·DC竞赛轴承故障检测开源Baseline(基于Keras1D卷积 val_acc:0.99780) 个人网站--> http://www.yansongsong.cn/ Githu ...
- [PHP] MIME邮件协议的multipart类型
邮件协议中的三种情况,对应下面的三种类型 multipart/mixed可以包含附件.multipart/related可以包含内嵌资源.multipart/alternative 纯文本与超文本共存 ...
- SpringBoot2 application.properties方式加载配置文件
application.properties jdbc.driverClassName=com.mysql.jdbc.Driver jdbc.url=jdbc:mysql://127.0.0.1:33 ...
- js中事件冒泡，事件捕获详解
一.事件流 事件是js与HTML交互的基础,事件流描述的是页面接受事件的顺序,而事件流又分为三个阶段:捕获阶段.目标阶段和冒泡阶段. 如果单纯的事件处理,事件捕获和事件冒泡二选一即可,导致两者并存的原 ...
- 前端页面基于JQuery的点击事件
一,使用id选择器 1.方式一 $("#id").click(function(){ do something }) 2.方式二 $("#id").on(&qu ...
- 《JavaScript高级程序设计》笔记：面向对象的程序设计（六）
面向对象的语言有一个标志,那就是它们都有类的概念,而通过类可以创建任意多个具有相同属性和方法的对象. 理解对象 创建自定义对象的最简单的方法就是创建一个Object的实例,然后再为它添加属性和方法.例 ...
- 【20190220】HTTP-知识点整理：TCP/IP与HTTP
TCP/IP是互联网相关的各类协议族的总称,HTTP属于它内部的一个子集. 一.TCP/TP的分层管理 1. 应用层 应用层决定了向用户提供应用服务时通信的活动.TCP/IP 协议族内预存了各类通用的 ...
- css的三种书写方式
一.内联样式 <p style="color: sienna; margin-left: 20px"> This is a paragraph </p> 二 ...
- 安卓5.0系统怎么无Root激活XPOSED框架的方法
在大多团队的引流或业务操作中,基本上都需要使用安卓的强大Xposed框架,几天前,我们团队买来了一批新的安卓5.0系统,基本上都都是基于7.0以上系统,基本上都不能够获得Root的su权限,纵然一些能 ...
- 关于C++11右值引用和移动语义的探究
关于C++11右值引用和移动语义的探究