__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 .
随机推荐
- jQuery使用(十四):extend()方法
浅层克隆 深层克隆 扩展方法 一.extend的基本使用 语法: $.extend( target [, object1 ] [, objectN ] ) $.extend( [deep ], tar ...
- JProfiler性能分析工具
1.简介 JProfiler是一个商业授权的Java剖析工具,用于分析Java EE和Java SE应用程序. 2.JVMTI JDK本身定义了目标明确并功能完善的JNI(Java Native In ...
- 求复变函数的 Taylor 展式与 Laurent 展式[华中师范大学2010年复变函数复试试题]
设 $$\bex f(z)=\frac{1}{(z-1)(z-2)}. \eex$$ (1) 求 $f(z)$ 在 $|z|<1$ 内的 Taylor 展式. (2) 求 $f(z)$ 在圆环 ...
- react中input自动聚焦问题
input自动聚焦问题 在react中可以使用refs解决这个问题,首先看一下refs的使用场景: (1)处理焦点.文本选择或媒体控制. (2)触发强制动画. (3)集成第三方 DOM 库. 使用re ...
- Spring系列(六) Spring Web MVC 应用构建分析
DispatcherServlet DispatcherServlet 是Spring MVC的前端控制器名称, 用户的请求到达这里进行集中处理, 在Spring MVC中, 它的作用是为不同请求匹配 ...
- Ansible之Playbook详解、案例
什么是playbook playbooks是一个不同于使用Ansible命令行执行方式的模式,其功能更强大灵活.简单来说,playbook是一个非常简单的配置管理和多主机部署系统,不同于任何已经存在的 ...
- ASP .NET Core HTTP Error 502.5 – Process Failure
页面返回错误 事件日志显示错误 大家可以先看着个链接 https://docs.microsoft.com/en-us/aspnet/core/publishing/iis?tabs=aspnetco ...
- 可持久化 trie 的简单入门
可持久化 $trie$ ....又是一个表里不一的东西..... 可持久化 $trie$ 的介绍: 和主席树类似的,其实可持久化就是体现在前缀信息的维护上(搞不懂这怎么就叫做可持久化了...) $ ...
- linux软件管理
People who cannot find time for recreation are obliged sooner or later to find time for illness.腾不出时 ...
- 爬虫-requests
一.爬虫系列之第1章-requests模块 爬虫简介 概述 近年来,随着网络应用的逐渐扩展和深入,如何高效的获取网上数据成为了无数公司和个人的追求,在大数据时代,谁掌握了更多的数据,谁就可以获得更高的 ...