__x__(29)0908第五天__高度塌陷 问题
高度塌陷
在文档流中,父元素的高度默认是被子元素撑开的。
但是当为 子元素 设置 float 时,子元素会完全脱离文档流,无法再撑开父元素,导致父元素高度塌陷。。。以致于布局混乱
变成
BFC块级格式化环境
根据 W3C 标准,元素都有一个隐含的属性 “Block Formatting Context”
该属性可以 打开/关闭,默认是“关闭”。
当开启BFC后,元素将具有如下特性:
1. 父元素的垂直外边距不会和子元素重叠。
2. 不会被浮动元素所覆盖,会在浮动元素的旁边显示。
3. 可以包含浮动的子元素。
只能间接开启BFC:
1. 设置元素浮动
虽然高度不塌陷,但是宽度变成适应子元素了,还会影响下面的元素布局。
2. 设置元素绝对定位
3. 设置元素为inline-block
虽然高度不塌陷,也不影响下面元素布局,但是宽度变成适应子元素了。
解决方法:
1. 为父元素指定一个固定的 height
缺点:父元素的高度无法再适应子元素高度变化。
2. 将父元素的 overflow 设置为非visible的值
缺点:IE6及以下浏览器并不支持overflow
即
father{
overflow: hidden;
}
3. IE6及以下浏览器具有一个 hasLayout 属性,作用和BFC类似
zoom: 1; 将放大元素1倍,开启 hasLayout 副作用最小。。。只有IE浏览器支持zoom
father{
overflow: hidden;
zoom:;
}
__x__(29)0908第五天__高度塌陷 问题的更多相关文章
- __x__(30)0908第五天__导航条的练习 <div>版本
效果图: html源代码: <!doctype html> <html> <head> <meta charset="utf-8" /& ...
- __x__(31)0908第五天__导航条的练习 <ul> 版本
效果图: html代码: <!doctype html> <html> <head> <meta charset="utf-8" /&g ...
- __x__(34)0908第五天__ 定位 position
position 定位 指将原始摆放到页面的任意位置. 继承性:no 默认值:static 没有定位,原始出现在正常的文档流中 可选值: static : 默认值,元素没有开启定位 ...
- __x__(35)0908第五天__ 层级 z-index
如果三个 div 全部设置 position: absolute; 绝对定位,且未设置 z-index, 则从代码结构上 下面的元素 会盖住 上面的元素. z-index 层级: 通过 z-i ...
- __x__(36)0908第五天__背景 background
1. 背景 background: red url(img/cat.gif) repeat-x fixed; 2. 背景颜色 background-color: red; 3. 背景图片 backgr ...
- __x__(32)0908第五天__Photoshop的基本操作
1. 设置 Photoshop 的单位为 像素px 2. 标尺 显示与隐藏 Ctrl + r 3. 放大与缩小 Ctrl + 1 放大到100% Ctrl + 0 适应屏幕 Alt + ...
- __x__(35)0908第五天__opacity 透明度
opacity 透明度 设置一个 0 - 1 之间的值. opacity: 0; 完全透明 opacity: 0.5 半透明 opacity: 1; 完全不透明 缺点: IE8及以 ...
- __x__(37)0909第五天__背景图按钮
link,hover,active三种按键状态,存放三张图片 缺点: 资源只有在被使用时,才会被加载. 页面第一次加载时,会出现短暂的延迟闪烁,造成一次不佳的用户体验. 图片整合技术 CSS-Spri ...
- __x__(38)0909第五天__雪碧图的制作
1. 用ps打开目标图片若干. 2. 调整合适的画布大小. 3. 将图片拖曳到一张里. 4. 存储为Web所用格式,选择 png24 .
随机推荐
- 分布式监控系统开发【day38】:监控trigger表结构设计(一)
一.需求讨论 1.zabbix触发器的模板截图 1.zabbix2.4.7 2.zabbix3.0 2.模板与触发器关联的好处 好处就是可以批量处理,比如我说我有1000机器都要监控cpu.内存.IO ...
- Maven 学习总结 (二) 之 生命周期与插件
五.生命周期与插件 1.Maven有三套独立的生命周期:clean.default和site. clean生命周期的目的是清理项目,default生命周期的目的是构建项目,site生命周期的目的是建立 ...
- 第四节:Task的启动的四种方式以及Task、TaskFactory的线程等待和线程延续的解决方案
一. 背景 揭秘: 在前面的章节介绍过,Task出现之前,微软的多线程处理方式有:Thread→ThreadPool→委托的异步调用,虽然也可以基本业务需要的多线程场景,但它们在多个线程的等待处理方面 ...
- [物理学与PDEs]第2章第3节 Navier-Stokes 方程组
1. 当流体的压力 $p$ 及温度 $T$ 改变时, 密度 $\rho$ 变化很小. 此时可近似地把流体看作是不可压的, 而 $\rho=\const$. 如此, 流体动力学方程组中的质量.动量守恒 ...
- MySQL的一些基本命令笔记(4)
delete 语句嵌套子查询: delete from 表名1 where 列名 操作符 (select 列名 from 表名2 where 条件); 示例: delete from customer ...
- Linux中安装C++编译器codeBlock,并配置opencv链接库
1.Linux中安装codeBlock https://blog.csdn.net/xinyunyishui/article/details/50967395 2.CodeBlock中的中文显示不完全 ...
- Java同步容器
一.为什么会出现同步容器 Java的集合框架中,主要有四大类别:List,Set,Queue,Map List,Set,Queue接口分别继承了Collection接口,Map本身是一个接口. 注意C ...
- 推荐安全且匿名的邮箱 ProtonMail -- PGP算法
==以前一直以为平时所用的邮箱是绝对安全的,没有深思它的安全性. 然而你要“犯罪”不留任何痕迹的话,呵呵. 国内应该没有类似 ProtonMail 的邮箱,-->去了解一下 ========== ...
- 用可配置外部工具的编辑器编译与执行java
用可配置外部工具的编辑器编译与执行java 最近用了everedit.觉得比之前平时用的Editplus有更多的细节与功能要好许多. 这里就写写用everedit编译与执行java的方法. 原理 ja ...
- ASP.NET Web API 之一 入门篇
一.基于RESTful标准的Web Api 原文讲解:https://www.cnblogs.com/lori/p/3555737.html 微软的web api是在vs2012上的mvc4项目绑定发 ...