高度塌陷

在文档流中,父元素的高度默认是被子元素撑开的。

但是当为 子元素 设置 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第五天__高度塌陷 问题的更多相关文章

  1. __x__(30)0908第五天__导航条的练习 <div>版本

    效果图:  html源代码: <!doctype html> <html> <head> <meta charset="utf-8" /& ...

  2. __x__(31)0908第五天__导航条的练习 <ul> 版本

    效果图:  html代码: <!doctype html> <html> <head> <meta charset="utf-8" /&g ...

  3. __x__(34)0908第五天__ 定位 position

    position 定位 指将原始摆放到页面的任意位置. 继承性:no 默认值:static        没有定位,原始出现在正常的文档流中 可选值: static :    默认值,元素没有开启定位 ...

  4. __x__(35)0908第五天__ 层级 z-index

    如果三个 div 全部设置 position: absolute; 绝对定位,且未设置 z-index,  则从代码结构上    下面的元素 会盖住 上面的元素. z-index 层级: 通过 z-i ...

  5. __x__(36)0908第五天__背景 background

    1. 背景 background: red url(img/cat.gif) repeat-x fixed; 2. 背景颜色 background-color: red; 3. 背景图片 backgr ...

  6. __x__(32)0908第五天__Photoshop的基本操作

    1. 设置 Photoshop 的单位为 像素px 2. 标尺   显示与隐藏 Ctrl + r 3. 放大与缩小 Ctrl + 1    放大到100% Ctrl + 0    适应屏幕 Alt + ...

  7. __x__(35)0908第五天__opacity 透明度

    opacity 透明度 设置一个  0 - 1 之间的值. opacity: 0;    完全透明 opacity: 0.5    半透明 opacity: 1;    完全不透明 缺点: IE8及以 ...

  8. __x__(37)0909第五天__背景图按钮

    link,hover,active三种按键状态,存放三张图片 缺点: 资源只有在被使用时,才会被加载. 页面第一次加载时,会出现短暂的延迟闪烁,造成一次不佳的用户体验. 图片整合技术 CSS-Spri ...

  9. __x__(38)0909第五天__雪碧图的制作

    1. 用ps打开目标图片若干. 2. 调整合适的画布大小. 3. 将图片拖曳到一张里. 4. 存储为Web所用格式,选择 png24 .

随机推荐

  1. 分布式监控系统开发【day38】:监控trigger表结构设计(一)

    一.需求讨论 1.zabbix触发器的模板截图 1.zabbix2.4.7 2.zabbix3.0 2.模板与触发器关联的好处 好处就是可以批量处理,比如我说我有1000机器都要监控cpu.内存.IO ...

  2. Maven 学习总结 (二) 之 生命周期与插件

    五.生命周期与插件 1.Maven有三套独立的生命周期:clean.default和site. clean生命周期的目的是清理项目,default生命周期的目的是构建项目,site生命周期的目的是建立 ...

  3. 第四节:Task的启动的四种方式以及Task、TaskFactory的线程等待和线程延续的解决方案

    一. 背景 揭秘: 在前面的章节介绍过,Task出现之前,微软的多线程处理方式有:Thread→ThreadPool→委托的异步调用,虽然也可以基本业务需要的多线程场景,但它们在多个线程的等待处理方面 ...

  4. [物理学与PDEs]第2章第3节 Navier-Stokes 方程组

    1.  当流体的压力 $p$ 及温度 $T$ 改变时, 密度 $\rho$ 变化很小. 此时可近似地把流体看作是不可压的, 而 $\rho=\const$. 如此, 流体动力学方程组中的质量.动量守恒 ...

  5. MySQL的一些基本命令笔记(4)

    delete 语句嵌套子查询: delete from 表名1 where 列名 操作符 (select 列名 from 表名2 where 条件); 示例: delete from customer ...

  6. Linux中安装C++编译器codeBlock,并配置opencv链接库

    1.Linux中安装codeBlock https://blog.csdn.net/xinyunyishui/article/details/50967395 2.CodeBlock中的中文显示不完全 ...

  7. Java同步容器

    一.为什么会出现同步容器 Java的集合框架中,主要有四大类别:List,Set,Queue,Map List,Set,Queue接口分别继承了Collection接口,Map本身是一个接口. 注意C ...

  8. 推荐安全且匿名的邮箱 ProtonMail -- PGP算法

    ==以前一直以为平时所用的邮箱是绝对安全的,没有深思它的安全性. 然而你要“犯罪”不留任何痕迹的话,呵呵. 国内应该没有类似 ProtonMail 的邮箱,-->去了解一下 ========== ...

  9. 用可配置外部工具的编辑器编译与执行java

    用可配置外部工具的编辑器编译与执行java 最近用了everedit.觉得比之前平时用的Editplus有更多的细节与功能要好许多. 这里就写写用everedit编译与执行java的方法. 原理 ja ...

  10. ASP.NET Web API 之一 入门篇

    一.基于RESTful标准的Web Api 原文讲解:https://www.cnblogs.com/lori/p/3555737.html 微软的web api是在vs2012上的mvc4项目绑定发 ...