高度塌陷

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

但是当为 子元素 设置 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. jQuery使用(十四):extend()方法

    浅层克隆 深层克隆 扩展方法 一.extend的基本使用 语法: $.extend( target [, object1 ] [, objectN ] ) $.extend( [deep ], tar ...

  2. JProfiler性能分析工具

    1.简介 JProfiler是一个商业授权的Java剖析工具,用于分析Java EE和Java SE应用程序. 2.JVMTI JDK本身定义了目标明确并功能完善的JNI(Java Native In ...

  3. 求复变函数的 Taylor 展式与 Laurent 展式[华中师范大学2010年复变函数复试试题]

    设 $$\bex f(z)=\frac{1}{(z-1)(z-2)}. \eex$$ (1) 求 $f(z)$ 在 $|z|<1$ 内的 Taylor 展式. (2) 求 $f(z)$ 在圆环 ...

  4. react中input自动聚焦问题

    input自动聚焦问题 在react中可以使用refs解决这个问题,首先看一下refs的使用场景: (1)处理焦点.文本选择或媒体控制. (2)触发强制动画. (3)集成第三方 DOM 库. 使用re ...

  5. Spring系列(六) Spring Web MVC 应用构建分析

    DispatcherServlet DispatcherServlet 是Spring MVC的前端控制器名称, 用户的请求到达这里进行集中处理, 在Spring MVC中, 它的作用是为不同请求匹配 ...

  6. Ansible之Playbook详解、案例

    什么是playbook playbooks是一个不同于使用Ansible命令行执行方式的模式,其功能更强大灵活.简单来说,playbook是一个非常简单的配置管理和多主机部署系统,不同于任何已经存在的 ...

  7. ASP .NET Core HTTP Error 502.5 – Process Failure

    页面返回错误 事件日志显示错误 大家可以先看着个链接 https://docs.microsoft.com/en-us/aspnet/core/publishing/iis?tabs=aspnetco ...

  8. 可持久化 trie 的简单入门

    可持久化 $trie$  ....又是一个表里不一的东西..... 可持久化 $trie$  的介绍: 和主席树类似的,其实可持久化就是体现在前缀信息的维护上(搞不懂这怎么就叫做可持久化了...) $ ...

  9. linux软件管理

    People who cannot find time for recreation are obliged sooner or later to find time for illness.腾不出时 ...

  10. 爬虫-requests

    一.爬虫系列之第1章-requests模块 爬虫简介 概述 近年来,随着网络应用的逐渐扩展和深入,如何高效的获取网上数据成为了无数公司和个人的追求,在大数据时代,谁掌握了更多的数据,谁就可以获得更高的 ...