__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 .
随机推荐
- Sobel 边缘检测算子
转自:http://blog.csdn.net/xiaqunfeng123/article/details/17302003 Sobel 算子是一个离散微分算子 (discrete different ...
- PyQt5之窗口类型
[TOC] 注:原创不易,转载请务必注明原作者和出处,感谢支持! 一 写在开头 1.1 本文内容 本文的主要内容:PyQt中的窗口部件:QMainWindow,QWidget,QDialog. 上述三 ...
- C++创建对象的三种方法
我自己以前经常弄混 A a(1); 栈内存中分配 A b = A(1); 栈内存中分配,和第一种无本质区别 A c = new A(1); 堆内存中分配 前两种在函数体执行完毕之后会被释放,第三种需要 ...
- 不定参数对arguments对象的影响
如果声明函数时定义了不定参数,则在函数被调用时,arguments对象包含了所有传入的参数: function checkArgs(...args){ console.log(args.length, ...
- PL/SQL连接远程oracle数据库配置
本人电脑:win10 64位, plsql:支持32位 一.安装好PL/SQL客户端 二.下载解压oracle客户端 1.instantclient 我下载的是oracle11g 32位的insta ...
- Problem B: Battle Royale(简单几何)
题目链接: B - Battle Royale Gym - 102021B 题目大意:给你两个坐标,表示起点和终点,然后给你两个圆,第一个圆包含两个圆,然后问你起点到终点的最短距离(不经过第二个圆 ...
- XL4001 典型应用电路
典型的应用电路如下: 中文数据手册:https://wenku.baidu.com/view/98ad2ed86f1aff00bed51ec7.html 在做毕设的时候用到的一款350ma的DC/DC ...
- Bootstrap模态框钩子事件
事件类型 描述show.bs.modal show 方法调用之后立即触发该事件.如果是通过点击某个作为触发器的元素,则此元素可以通过事件的 relatedTarget 属性进行访问.shown.b ...
- css之字体的引用
font-family 属性设置文本的字体系列. font-family 属性应该设置几个字体名称作为一种"后备"机制,如果浏览器不支持第一种字体,他将尝试下一种字体. 注意: 如 ...
- Linux什么是挂载?mount的用处在哪?
关于挂载的作用一直不是很清楚,今天在阅读教材时看见了mount这个命令,发现它的用处很隐晦但非常强大.奈何教材说的不明朗,因此在网上整合了一些优秀的解释,看完之后豁然开朗. 1.提一句Windows下 ...